<template>
  <div class="wraper">
    <!-- <div class="page_left">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        highlight-current
        :node-key="'sort'"
        :current-node-key="0"
        @node-click="handleNodeClick"
      >
        <span
          class="custom-tree-node"
          slot-scope="{ node, data }"
        >
          <span v-html="node.label"></span>
          <span>({{ data.quantity }})</span>
        </span>
      </el-tree>
    </div> -->
    <div class="page_right">
      <el-form
        :inline="true"
        size="mini"
        @submit.native.prevent
        v-enter-submit="search"
        class="search_form">
        <template>
          <el-form-item label="名称">
            <el-input
              v-model="searchForm.name"
              placeholder="中文或英文"
              clearable></el-input>
          </el-form-item>
          <el-form-item label="编码">
            <el-input
              v-model="searchForm.code"
              placeholder="中文或英文"
              clearable></el-input>
          </el-form-item>
          <el-form-item label="类别" prop="employeeName">
            <el-select
              v-model="searchForm.cateCode"
              clearable
              placeholder="请选择">
              <el-option label="颜色" value="Color"></el-option>
              <el-option label="尺寸" value="Size"></el-option>
              <el-option label="其他" value="Other"></el-option>
            </el-select>
          </el-form-item>

          <!-- <el-form-item label="SKU属性">
            <el-select
              style="width: 120px"
              v-model="searchForm.skuProperty"
              clearable
              value-key=""
              placeholder="请选择">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button
              type="primary"
              @click="search()"
              :loading="searchLoading"
              icon="el-icon-search"
              native-type="submit">
              查询
            </el-button>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="success" @click="addDialog(1)">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="delLoading"
            type="danger"
            @click="deleteSection()">
            删除
          </el-button>
        </el-form-item>
        <el-form-item style="margin-bottom: 0px">
          <el-button
            :loading="exportLoading"
            type="primary"
            @click="importExcel">
            导入
          </el-button>
        </el-form-item>
      </el-form>
      <div class="table-wrap" v-loading="loading">
        <my-table
          :sourceData="userData"
          ref="multipleTable"
          :selection="true"
          :tableColumns="tableColumns"
          @selectionChange="selectionChange"
          @currentChange="currentTabFn"></my-table>
      </div>
      <div class="pagination">
        <pagination
          :setValue="setpaginationOptions"
          :options="paginationOptions" />
      </div>
    </div>

    <!-- 弹出层 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="is_title == 1 ? '新增' : '编辑'"
      :visible.sync="dialogVisible"
      width="700px">
      <el-form
        label-position="right"
        label-width="100px"
        size="mini"
        :inline="true"
        :model="addcurrencyform"
        :rules="addrules"
        ref="addcurrencyform">
        <el-form-item label="中文名" prop="cnname" required>
          <el-input
            style="width: 164px"
            v-model="addcurrencyform.cnname"
            placeholder="请输入中文名"></el-input>
        </el-form-item>
        <el-form-item label="英文名" prop="enname" required>
          <el-input
            style="width: 164px"
            v-model="addcurrencyform.enname"
            placeholder="请输入英文名"></el-input>
        </el-form-item>
        <el-form-item label="编码" prop="code" required>
          <el-input
            style="width: 164px"
            v-model="addcurrencyform.code"
            maxlength="7"
            placeholder="请输入编码"></el-input>
        </el-form-item>

        <el-form-item label="类别" prop="cateCode" required>
          <el-select
            v-model="addcurrencyform.cateCode"
            style="width: 164px"
            clearable
            placeholder="请选择">
            <el-option label="颜色" value="Color"></el-option>
            <el-option label="尺寸" value="Size"></el-option>
            <el-option label="其他" value="Other"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序序号" prop="sort">
          <el-input
            style="width: 164px"
            v-model.number="addcurrencyform.sort"
            placeholder="请输入数字"></el-input>
        </el-form-item>
        <el-form-item label="是否带电池">
          <el-select
            style="width: 164px"
            v-model="addcurrencyform.battery"
            clearable
            value-key=""
            placeholder="请选择">
            <el-option label="是" :value="true"></el-option>
            <el-option label="否" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否液体">
          <el-select
            style="width: 164px"
            v-model="addcurrencyform.liquid"
            clearable
            value-key=""
            placeholder="请选择">
            <el-option label="是" :value="true"></el-option>
            <el-option label="否" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否刀具">
          <el-select
            style="width: 164px"
            v-model="addcurrencyform.knife"
            clearable
            value-key=""
            placeholder="请选择">
            <el-option label="是" :value="true"></el-option>
            <el-option label="否" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文字色">
          <el-color-picker
            style="width: 164px"
            v-model="addcurrencyform.fontColor"
            size="small"></el-color-picker>
        </el-form-item>
        <el-form-item label="背景色" prop="bgColor">
          <div style="display: flex;align-items: center">
            <el-color-picker
              v-model="addcurrencyform.bgColor"
              size="small"></el-color-picker>
            <span :style="{
                width: '45px',
                lineHeight:'20px',
                marginLeft:'20px',
                textAlign: 'center',
                fontSize: '12px',
                height: '20px',
                display: 'inline-block' ,
                backgroundColor:addcurrencyform.
                bgColor,color:addcurrencyform.fontColor
            }">
            字色
          </span>
          </div>

        </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="addCurrency()"
          size="mini"
          style="width: 100px">
          确认
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from '../../common/api/axios'
import MyTable from '@/common/components/base/tableView.vue'

export default {
  name: 'system_sku-manage',
  components: {
    MyTable
  },
  data() {
    return {
      loading: false,
      treeData: [],
      is_title: 1,
      userData: [],
      selection: [],
      dialogVisible: false,
      searchLoading: false,
      delLoading: false,
      exportLoading: false,
      searchForm: {
        cateId: '',
        code: '',
        name: ''
      },
      addcurrencyform: {
        sort: '',
        cateCode: '',
        code: '',
        cnname: '',
        enname: '',
        fontColor: '',
        bgColor: ''
      },
      all_list: [],
      addcurrencyform2: {
        fontColor: 'black',
        bgColor: 'white'
      },
      formId: null,
      addrules: {},
      paginationOptions: {
        pageSize: 100,
        currentPage: 1,
        total: 0
      },
      defaultProps: {
        label: 'name'
      }
    }
  },
  computed: {
    tableColumns() {
      return [
        {
          label: '中文名',
          key: 'cnname'
        },
        {
          label: '英文名',
          key: 'enname'
        },
        {
          label: '编码',
          key: 'code'
        },
        {
          label: '类别',
          key: 'cateName'
        },

        {
          label: '排列序号',
          key: 'sort',
          width: 80
        },
        {
          label: '是否带电池',
          key: 'battery',
          render: (item) => <span>{item.battery ? '是' : '否'}</span>
        },
        {
          label: '是否液体',
          key: 'liquid',
          render: (item) => <span>{item.liquid ? '是' : '否'}</span>
        },
        {
          label: '是否刀具',
          key: 'knife',
          render: (item) => <span>{item.knife ? '是' : '否'}</span>
        },
        // {
        //   label: '文字色',
        //   key: 'fontColor',
        //   width: 80,
        //   render: (item) => (
        //     <span
        //       style={{
        //         width: '20px',
        //         height: '20px',
        //         display: 'inline-block',
        //         backgroundColor: item.fontColor
        //       }}></span>
        //   )
        // },
        {
          label: '背景色',
          key: 'bgColor',
          width: 80,
          render: (item) => (
            <span
              style={{
                width: '45px',
                color: item.fontColor,
                fontSize: '12px',
                height: '20px',
                display: 'inline-block',
                backgroundColor: item.bgColor
              }}>
              字色
            </span>
          )
        },
        {
          label: '相关操作',
          width: 80,
          render: (item) => (
            <div>
              <span class="icon-view icon-edit-view" title="编辑">
                <i
                  class="el-icon-edit"
                  onClick={() => this.addDialog(2, item)}></i>
              </span>
              <span class="icon-view icon-del-view" title="删除">
                <i
                  class="el-icon-delete-solid"
                  onClick={() => this.deleteSection(item)}></i>
              </span>
            </div>
          )
        }
      ]
    }
    // categoryList() {
    //   const list = [
    //     {
    //       label: 'SKU属性',
    //       children: [],
    //     },
    //     {
    //       label: '一般属性',
    //       children: [],
    //     },
    //   ]
    //   const isSkuProperty = this.all_list.filter(
    //     (item) => item.skuProperty,
    //   )
    //   list[0].children = isSkuProperty || []
    //   const noSkuProperty = this.all_list.filter(
    //     (item) => !item.skuProperty,
    //   )
    //   list[1].children = noSkuProperty || []
    //   return list
    // },
  },
  created() {
    this.alllist('baseProperty/all_list')
    this.getList(1)
    this.addcurrencyform2 = JSON.parse(JSON.stringify(this.addcurrencyform))
  },

  methods: {
    // 查询
    search() {
      this.getList(1)
    },
    handleNodeClick(node) {
      this.skuProperty = node.skuProperty
      this.getList()
    },
    currentTabFn(val) {
      if (val) {
        this.formId = val.id
      } else {
        this.formId = null
      }
    },
    selectionChange(selection) {
      this.selection = selection
    },

    // 修改新增
    addDialog(i, v = null) {
      // eslint-disable-next-line eqeqeq
      if (i == 2) {
        if (v) {
          this.formId = v.id
          // v.cateIdList = [v.cateId]
        }
        if (!this.formId) {
          return this.$message('请勾选至少一条记录')
        }
        this.addcurrencyform = Object.assign({}, v)
        if (this.$refs.addcurrencyform) {
          this.$refs.addcurrencyform.resetFields()
        }
      } else {
        this.$nextTick(() => {
          if (this.$refs.addcurrencyform) {
            this.$refs.addcurrencyform.resetFields()
          }
          this.addcurrencyform = {
            fontColor: '#000000',
            bgColor: '#ffffff'
          }
        })
      }
      this.is_title = i
      this.dialogVisible = true
    },
    addCurrency() {
      // eslint-disable-next-line eqeqeq
      if (this.is_title == 1) {
        this.addSection()
      } else {
        this.upSection()
      }
    },
    importExcel() {
      this.exportLoading = true
      const input = document.createElement('input')
      input.style.display = 'none'
      input.type = 'file'
      input.click()
      input.onchange = async () => {
        const form = new FormData()
        form.append('importExcel', input.files.length > 0 ? input.files[0] : [])
        const res = await axios.post(
          'base/propertyValue/importBasePropertyValue',
          form
        )
        console.log(res)
        if (res.code === 200) {
          this.$message.success('导入成功')
          this.getList()
        }
        this.exportLoading = false
      }
    },
    setpaginationOptions(opt) {
      for (const key in opt) {
        this.paginationOptions[key] = opt[key]
      }
      this.getList()
    },
    // 查询
    getList() {
      const {
        pageSize,
        currentPage
      } = this.paginationOptions
      this.loading = true
      axios
        .get('base/propertyValue/list_page', {
          params: {
            pageSize,
            currentPage,
            skuProperty: this.skuProperty,
            ...this.searchForm
          },
          baseURL: '/api/manage/rest'
        })
        .then((res) => {
          // eslint-disable-next-line eqeqeq
          if (res.code == 200) {
            this.userData = res.data.records
            this.paginationOptions.total = res.data.total
          } else {
            this.$alert(res.message, '错误提示', {
              dangerouslyUseHTMLString: true
            })
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 部门职员查询
    selectSection() {
      const url = `base/propertyValue/get?id=${this.formId}`
      axios.get(url).then((res) => {
        // eslint-disable-next-line eqeqeq
        if (res.code == 200) {
          const data = res.data
          for (const item in data) {
            if (data[item] && !Array.isArray(data[item])) {
              data[item] = data[item] + ''
            }
          }
          this.addcurrencyform = Object.assign({}, data)
          // console.log(this.addcurrencyform);
          this.is_title = 2
          this.dialogVisible = true
        } else {
          this.$alert(res.message, '错误提示', {
            dangerouslyUseHTMLString: true
          })
        }
      })
    },
    // 修改
    upSection() {
      const url = 'base/propertyValue/update'
      this.$refs.addcurrencyform.validate((valid) => {
        if (valid) {
          axios.post(url, this.addcurrencyform).then((res) => {
            // eslint-disable-next-line eqeqeq
            if (res.code == 200) {
              this.dialogVisible = false
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.getList(this.currentPage)
            } else {
              this.$alert(res.message, '错误提示', {
                dangerouslyUseHTMLString: true
              })
            }
          })
        }
      })
    },
    // 新增
    addSection() {
      const url = 'base/propertyValue/add'
      this.$refs.addcurrencyform.validate((valid) => {
        if (valid) {
          axios.post(url, this.addcurrencyform).then((res) => {
            // eslint-disable-next-line eqeqeq
            if (res.code == 200) {
              this.dialogVisible = false
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.getList(this.currentPage)
            } else {
              this.$alert(res.message, '错误提示', {
                dangerouslyUseHTMLString: true
              })
            }
          })
        }
      })
    },
    // 删除
    deleteSection(v) {
      let arr = []
      if (v) {
        arr.push(v)
      } else {
        arr = this.selection
      }
      const leng = arr.length
      // eslint-disable-next-line eqeqeq
      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(() => {
          if (!v) this.delLoading = true
          const url = `base/propertyValue/delete?ids=${ids}`
          axios.get(url).then((res) => {
            // eslint-disable-next-line eqeqeq
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getList(this.currentPage)
            }
            if (!v) this.delLoading = false
          })
        })
        .catch(() => {
          if (!v) this.delLoading = false
        })
    },
    // 选择列表接口
    alllist(url) {
      axios
        .get(url, {
          baseURL: '/api/manage/rest'
        })
        .then((res) => {
          // eslint-disable-next-line eqeqeq
          if (res.code == 200) {
            this.all_list = res.data
          } else {
            this.$alert(res.message, '错误提示', {
              dangerouslyUseHTMLString: true
            })
          }
        })
    }
  }
}
</script>
<style scoped>
.wraper {
  height: 100%;
  display: flex;
  overflow: hidden;
}

.page_left {
  width: 200px;
  min-width: 200px;
  background: #fff;
  border-radius: 5px;
  margin-right: 10px;
}

.page_right {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
}

.table-wrap {
  background: #fff;
  flex: 1;
  overflow: hidden;
  width: 100%;
}

.category-list-item-label {
  font-size: 14px;
  font-weight: bold;
}

.category-list-options {
  padding: 6px 0;
}

.category-list-options::v-deep .el-select-dropdown__item {
  height: 26px;
  line-height: 26px;
}

.search_form {
  margin-top: 5px;
  margin-left: 10px;
}

.search_form > .el-form-item {
  margin-bottom: 5px;
}
</style>
