<template>
  <div class="wraper">
    <el-form :inline="true" size="mini">
      <el-form-item>
        <el-button type="primary" @click="create">
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <div class="table_wrap" v-loading="loading">
      <table-vue
        :sourceData="sourceData"
        ref="multipleTable"
        :tableColumns="tableColumns"
        @currentChange="currentTabFn"
        :rowclass="cellClass"
        @selectionChange="selectionChange"
      ></table-vue>
    </div>
    <div class="pagination">
      <el-pagination
        layout="sizes, total, prev, pager, next, jumper"
        background
        :total="paginationOptions.total"
        :page-size="paginationOptions.pageSize"
        :current-page="paginationOptions.currentPage"
        @size-change="sizeChange"
        @current-change="onCurrentChange"
      >
      </el-pagination>
    </div>

    <!-- 弹出层 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="is_title == 1 ? '新增' : '编辑'"
      :visible.sync="dialogVisible"
      width="400px"
    >
      <el-form
        label-position="right"
        label-width="80px"
        size="mini"
        :inline="true"
        :model="templateform"
        :rules="addRules"
        ref="templateform"
      >
        <el-form-item label="模板名称" prop="templateName">
          <el-input
            style="width: 100%;"
            v-model="templateform.templateName"
            placeholder="请输入模板名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品类型" prop="productType">
          <el-select placeholder="请选择产品类型" style="width: 100%;" clearable filterable
                     v-model="templateform.productType">
            <el-option :label="item" :value="item" v-for="item in productTypeList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分组索引" prop="typeGroupIdx">
          <el-input
            v-model="templateform.typeGroupIdx"
            placeholder="请输入分组索引"
          ></el-input>
        </el-form-item>
        <el-form-item label="属性索引" prop="typeNameIdx">
          <el-input
            v-model="templateform.typeNameIdx"
            placeholder="请输入属性索引"
          ></el-input>
        </el-form-item>
        <el-form-item label="模板" prop="file">
          <el-upload action="" :show-file-list="true" :before-upload="beforeUpload" :file-list="fileList">
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="dialogVisible = false"
          size="mini"
          style="width: 100px"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="template()"
          size="mini"
          style="width: 100px"
        >
          确认
        </el-button>
      </span>
    </el-dialog>

    <el-dialog
      v-loading="dialogLoading"
      :close-on-click-modal="false"
      title="属性管理"
      :visible.sync="attrVisible"
      width="80%"
    >
      <el-form
        v-if="attrList.length===0"
        label-position="right"
        label-width="80px"
        size="mini"
        :inline="true"
        :model="attrform"
        ref="templateform"
      >
        <el-form-item label="文件" required prop="file">
          <el-upload action="" :show-file-list="true" :before-upload="beforeUploadAttr" :file-list="fileListAttr">
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span v-if="attrList.length===0" slot="footer" class="dialog-footer">
        <el-button
          @click="attrVisible = false"
          size="mini"
          style="width: 100px"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="attrFileSave()"
          size="mini"
          style="width: 100px"
        >
          确认
        </el-button>
      </span>
      <div class="attr-list">
        <el-tabs>
          <el-tab-pane v-for="it in attrList" :key="it.id" :label="it.propGroup">
            <el-row :gutter="10">
              <el-col :span="4" v-for="(item,index) in it.children" :key="item.id">
                <div class="li">
                  <span class="name" v-if="!item.isEdit" @click="setEdit(item)">{{ item.propName }}</span>
                  <div class="input" v-else>
                    <el-input size="mini" v-model="item.propName" clearable></el-input>
                    <i @click="setEdit(item)" style="color: green" class="el-icon-circle-check"></i>
                  </div>
                  <div class="right">
                    <i @click="it.children.splice(index,1)" style="color: red" class="el-icon-close"></i>
                    <el-popover
                      placement="right"
                      width="400"
                      v-model="item.show"
                      trigger="manual">
                      <el-form :model="item">
                        <el-form-item label="数据类型">
                          <el-radio-group v-model="item.inputType">
                            <el-radio label="input">输入框</el-radio>
                            <el-radio label="radio">单选</el-radio>
                            <el-radio label="select">多选</el-radio>
                          </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="item.inputType!=='input'" label="选项">
                          <el-button @click="setChildrenAdd(item)" type="primary" size="mini">添加</el-button>
                          <ul style="max-height: 200px;overflow-y: scroll">
                            <li style="display: flex;align-items: center" v-for="(o,io) in item.children" :key="io">
                              <el-input size="mini" style="width: 80%;margin-right: 15px" placeholder="选项" clearable
                                        v-model="o.inputValue"></el-input>
                              <i @click="item.children.splice(io,1)" class="el-icon-close"
                                 style="color: red;margin-left: 10px;cursor:pointer;"></i>
                            </li>
                          </ul>
                        </el-form-item>
                        <el-form-item>
                          <div class="btn" style="display: flex;justify-content: center">
                            <el-button @click="cancelSave(item)" style="margin-right: 20px" size="mini">取消</el-button>
                            <el-button @click="saveItem(item)" size="mini" type="primary">保存</el-button>
                          </div>

                        </el-form-item>
                      </el-form>
                      <i @click="$set(item,'show',!item.show)" slot="reference" class="el-icon-setting"></i>
                    </el-popover>
                    <el-checkbox style="margin-right: 5px" v-model="item.required"></el-checkbox>
                  </div>

                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span v-if="attrList.length" slot="footer" class="dialog-footer">
        <el-button
          @click="attrVisible = false"
          size="mini"
          style="width: 100px"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="saveAttr()"
          size="mini"
          style="width: 100px"
        >
          确认
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios, { get, post } from '../../common/api/axios'
import tableVue from '@/common/components/base/tableView.vue'

export default {
  name: 'basics_currency',
  components: {
    tableVue
  },
  data() {
    return {
      is_title: 1,
      select: '',
      sourceData: [],
      fileList: [],
      productTypeList: [],
      attrList: [],
      fileListAttr: [],
      searchForm: {},
      attrform: {},
      dialogVisible: false,
      dialogLoading: false,
      attrVisible: false,
      templateform: {},
      templateform2: null,
      formId: null,
      paginationOptions: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      loading: false
    }
  },
  created() {
    this.getList()
    this.getProductType()
    this.templateform2 = JSON.parse(
      JSON.stringify(this.templateform)
    )
  },
  computed: {
    addRules() {
      const obj = {
        templateName: [
          {
            required: true,
            message: '请输入模板名称',
            trigger: 'blur'
          }
        ],
        productType: [
          {
            required: true,
            message: '请选择产品类型',
            trigger: 'change'
          }
        ],
        typeGroupIdx: [
          {
            required: true,
            message: '请输入分组索引',
            trigger: 'blur'
          }
        ],
        typeNameIdx: [
          {
            required: true,
            message: '请输入属性索引',
            trigger: 'blur'
          }
        ]

      }
      if (this.is_title !== 0) {
        obj.file = [
          {
            required: true,
            message: '请上传模板',
            trigger: 'blur'
          }
        ]
      }
      return obj
    },
    tableColumns() {
      return [
        {
          label: '模板名称',
          key: 'templateName'
        },
        {
          label: '产品类型',
          key: 'productType'
        },
        {
          label: '分组索引',
          key: 'typeGroupIdx'
        },
        {
          label: '属性索引',
          key: 'typeNameIdx'
        },
        {
          label: '操作',
          width: 120,
          render: (item) => (
            <div>
              {(
                <span
                  class="icon-view icon-tools-view"
                  title="属性管理"
                  onClick={() => this.getAttr(item)}>
                <i class="el-icon-tickets"></i>
              </span>

              )
              }
              {
                (
                  <span
                    class="icon-view icon-edit-view"
                    title="编辑"
                    onClick={() => this.edit(item)}>
                  <i class="el-icon-edit"></i>
                </span>
                )}
              {(
                <span
                  class="icon-view icon-del-view"
                  title="删除"
                  onClick={() => this.deleteAnnounces(item)}>
                  <i class="el-icon-delete"></i>
                </span>
              )}
            </div>
          )
        }
      ]
    }
  },
  methods: {
    async deleteAnnounces(item) {
      this.$confirm('确定删除选中的数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            const res = await get('amazonProductTypeTemplate/delete?ids=' + item.id)
            if (res.code !== 200) return
            this.$message.success(res.message)
            this.getList()
          } catch (e) {
            console.error(e)
          }
        })
    },
    saveAttr() {
      const attrList = JSON.parse(JSON.stringify(this.attrList))
      attrList.forEach(item => {
        item.children.forEach(el => {
          if (el.children && el.children.length > 0) {
            el.inputValue = el.children.map(el => el.inputValue).join()
          }
          delete el.children
        })
      })
      post('amazonProductTemplateProp/saveOrUpdatePropList', attrList).then(res => {
        if (res.code === 200) {
          this.attrVisible = false
          this.$message.success('操作成功')
        }
      })
    },
    saveItem(item) {
      if (!item.inputType) {
        return this.$message.warning('请选择数据类型')
      }
      if (item.inputType !== 'input') {
        const len = item.children.filter(el => !el.inputValue)
        if (item.children.length === 0) {
          return this.$message.warning('选项不能为空')
        }
        if (len.length > 0) {
          return this.$message.warning('输入不能为空')
        }
      }
      this.$set(item, 'show', !item.show)
    },
    cancelSave(item) {
      this.$set(item, 'inputType', null)
      this.$set(item, 'children', [])
      this.$set(item, 'show', !item.show)
    },
    setChildrenAdd(item) {
      if (!item.children) item.children = []
      const arr = item.children
      arr.push({
        inputValue: ''
      })
      this.$set(item, 'children', arr)
    },
    setEdit(item) {
      this.$set(item, 'isEdit', !item.isEdit)
    },
    edit(item) {
      this.templateform = JSON.parse(JSON.stringify(item))
      this.dialogVisible = true
      this.is_title = 0
      if (item.path) {
        this.fileList = [
          {
            name: item.path
          }
        ]
        delete this.templateform.file
        delete this.templateform.createTime
        delete this.templateform.updateTime
        delete this.templateform._id
      }
    },
    getAttr(item) {
      post(`amazonProductTemplateProp/productTypePropList?productType=${item.productType}`).then(res => {
        console.log(res)
        if (res.data.length === 0) {
          this.attrform = {
            templateId: item.id,
            productType: item.productType
          }
          this.fileListAttr = []
          this.attrList = []
        } else {
          this.fileListAttr = []
          const attrList = JSON.parse(JSON.stringify(res.data))
          attrList.forEach(item => {
            item.children.forEach(el => {
              if (el.inputValue) {
                el.children = el.inputValue.split(',').map(el => {
                  return {
                    inputValue: el
                  }
                })
              } else {
                el.children = []
              }
            })
          })
          this.attrList = attrList
        }
        this.attrVisible = true
      })
    },
    attrFileSave() {
      if (!this.attrform.file) {
        return this.$message.warning('请选择文件')
      }
      this.dialogLoading = true
      const data = new FormData()
      data.append('file', this.attrform.file)
      data.append('templateId', this.attrform.templateId)
      data.append('productType', this.attrform.productType)
      post('amazonProductTemplateProp/uploadSaveProp', data).then(res => {
        if (res.code === 200) {
          this.attrList = res.data
          this.$message.success('操作成功')
        }
        this.dialogLoading = false
      })
    },
    beforeUpload(f) {
      this.fileList = [{
        name: f.name
      }]
      this.templateform.file = f
      return false
    },
    beforeUploadAttr(f) {
      this.fileListAttr = [{
        name: f.name
      }]
      this.attrform.file = f
      return false
    },
    getProductType() {
      axios
        .post('amazonProductTypeTemplate/getProductTypeList')
        .then(res => {
          this.productTypeList = res.data
        })
    },
    create() {
      this.dialogVisible = true
      this.is_title = 1
      this.templateform = {}
      this.fileList = []
    },
    onCurrentChange(currentPage) {
      this.paginationOptions.currentPage = currentPage
      this.getList()
    },
    sizeChange(pageSize) {
      this.paginationOptions.pageSize = pageSize
      this.getList()
    },
    cellClass({ row }) {
      if (row.authAuditFlag === 1) {
        return 'first'
      } else {
        return ''
      }
    },
    selectionChange(selection) {
      if (selection.length > 0) {
        this.select = selection
      }
    },
    search() {
      this.paginationOptions.currentPage = 1
      this.getList()
    },
    currentTabFn(val) {
      if (val.row) {
        this.formId = val.row.id
      }
    },
    // 修改新增
    addDialog(i, v = null) {
      if (i === 2) {
        if (v) this.formId = v.id
        if (!this.formId) {
          return this.$message('请勾选至少一条记录')
        }
        this.selectSection()
      } else {
        this.$nextTick(() => {
          this.templateform = JSON.parse(
            JSON.stringify(this.templateform2)
          )
        })
        this.is_title = i
        this.dialogVisible = true
      }
      if (this.$refs.templateform) {
        this.$refs.templateform.resetFields()
      }
    },
    template() {
      this.addSection()
    },
    setpaginationOptions(opt) {
      for (const key in opt) {
        this.paginationOptions[key] = opt[key]
      }
      this.getList()
    },
    // 查询
    getList() {
      this.loading = true
      const {
        pageSize,
        currentPage
      } = this.paginationOptions
      axios
        .post('amazonProductTypeTemplate/list_page', {
          pageSize,
          currentPage,
          ...this.searchForm
        })
        .then(res => {
          this.loading = false
          if (res.code === 200) {
            this.sourceData = res.data.records
            this.paginationOptions.total = res.data.total
          } else {
            this.$alert(res.message, '错误提示', {
              dangerouslyUseHTMLString: true
            })
          }
        })
    },

    // 新增
    addSection() {
      const url = this.is_title === 0 ? 'amazonProductTypeTemplate/update' : 'amazonProductTypeTemplate/uploadAmazonTemplate'
      if (this.is_title !== 0) {
        if (!this.templateform.file) {
          return this.$message.warning('请选择模板文件')
        }
      }
      this.$refs.templateform.validate(valid => {
        if (valid) {
          const fm = new FormData()
          for (const k in this.templateform) {
            fm.append(k, this.templateform[k])
          }
          axios.post(url, fm).then(res => {
            if (res.code === 200) {
              this.dialogVisible = false
              this.getList()
            }
          })
        }
      })
    },
    // 删除
    deleteSection(v) {
      let arr = []
      if (v) {
        arr.push(v)
      } else {
        arr = this.select
      }
      const leng = arr.length
      if (leng === 0) {
        return this.$message('请勾选至少一条记录')
      }
      let ids = []
      ids = arr.map(v => {
        return v.id
      })
      ids = ids.join()
      this.$confirm('确定删除选中的信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          axios
            .get('platform/user/delete', {
              params: {
                ids: ids
              }
            })
            .then(res => {
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.getList()
              } else {
                this.$alert(res.message, '错误提示', {
                  dangerouslyUseHTMLString: true
                })
              }
            })
        })
        .catch(() => {
        })
    }
  }
}
</script>
<style scoped>
.wraper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.table_wrap {
  flex: 1;
}

.circle {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  margin-right: 5px;
}

.my-table >>> .first {
  background-color: red !important;
  color: #fff !important;
}

.attr-list {
  .li {
    padding: 5px;
    margin: 5px 10px;
    width: 100%;
    height: 37px;
    text-align: left;
    border: 1px solid #ececec;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .name {
      white-space: nowrap;
      flex: 1;
      flex-shrink: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .right {

      i {
        font-size: 12px;
        margin-right: 10px;
      }
    }

    .input {
      flex: 1;
      flex-shrink: 0;
      overflow: hidden;
      display: flex;
      align-items: center;

      i {
        margin: 0 3px;
      }
    }

    i {
      color: gray;
      margin-left: 5px;
      cursor: pointer;

    }
  }
}
</style>
<style lang="scss">

.el-dialog__wrapper {
  .el-form {
    .el-form-item {
      display: flex;

      .el-form-item__content {
        flex-shrink: 0;
        flex: 1;
        overflow: hidden;
      }
    }
  }
}
</style>
