<!--品类新增弹窗-->
<template>
  <el-dialog
    :title="title"
    width="840px"
    :visible.sync="isShowInfo"
    append-to-body
    @close="close"
  >
    <div class="categoryDialog">
      <div class="content">
        <div class="inputContent">
          <div class="inputbox">
            <red-star />
            <input-vue
              v-model="categoryInfo.categoryCode"
              title="编号"
              class="inputWidth"
            />
          </div>
          <div class="inputbox">
            <red-star />
            <input-vue title="上级品类" class="inputWidth">
              <el-select
                v-model="categoryInfo.pCategoryCode"
                filterable
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in categoryList"
                  :key="item.categoryCode"
                  :label="item.categoryName"
                  :value="item.categoryCode"
                />
              </el-select>
            </input-vue>
          </div>
          <div class="inputbox">
            <red-star />
            <input-vue title="备注" class="inputWidth">
              <el-input
                v-model="categoryInfo.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
              />
            </input-vue>
          </div>
        </div>
        <div class="inputContent">
          <div class="inputbox">
            <red-star />
            <input-vue
              v-model="categoryInfo.categoryName"
              title="名称"
              class="inputWidth"
            />
          </div>
          <div class="inputbox">
            <red-star />
            <input-vue title="资质要求" class="inputWidth">
              <el-select
                v-model="categoryInfo.qualifyIds"
                filterable
                multiple
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in certificationList"
                  :key="item.id"
                  :label="item.qualifyName"
                  :value="item.id"
                />
              </el-select>
            </input-vue>
          </div>
        </div>
      </div>
      <div class="AddContent">
        <div class="addBtn">
          <el-button type="primary" @click="pushAry">
            添加产品参数
          </el-button>
        </div>
        <div v-for=" (item,index) in categoryInfo.productParams" :key="index">
          <div class="addItem">
            <div class="devName item">
              <red-star />
              <input-vue v-model="item.paramName" title="名称" class="inputWidth" />
            </div>
            <div class="number item">
              <red-star />
              <input-vue title="排序" class="inputWidth">
                <input-number v-model="item.paramOrder" />
              </input-vue>
            </div>
            <div class="isRequire item">
              <input-vue title="" class="inputWidth">
                <el-checkbox v-model="item.paramRequire" true-label="1" false-label="0">
                  必填
                </el-checkbox>
              </input-vue>
            </div>
            <div class="delete item">
              <el-button type="primary" @click="removeAry(index)">
                删除
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="btnBox">
        <el-button type="primary" class="save" @click="save">
          保存
        </el-button>
        <el-button type="info" class="close" @click="close">
          取消
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import dialogHeader from './dialogHeader.vue'
import inputVue from '../input/inputVue.vue'
import InputNumber from '../input/inputNumber.vue'
import RedStar from '../redStar.vue'
import { Message } from 'element-ui'
import { C_add, C_list, C_update, detail } from '../../../api/product/category'
import { getCertification } from '../../../api/systemNew/systemNew'

export default {
  components: {
    inputVue,
    InputNumber,
    RedStar
  },
  props: {
    isShowInfo: {
      type: Boolean,
      default: true
    },
    dataInfo: {
      type: Object
    },
    title: ''
  },
  data() {
    return {
      // 品类信息
      categoryInfo: {
        categoryCode: '',
        categoryName: '',
        pCategoryCode: '',
        remark: '',
        qualifyIds: '',
        productParams: [
          {
            paramName: '',
            paramOrder: 0,
            paramRequire: 0
          }
        ]
      },
      categoryList: [],
      // 资质列表
      certificationList: [],
    }
  },
  watch: {
    dataInfo: {
      handler(vla) {
        if (vla !== '') {
          // 编辑操作
          if (!vla.id) return
          detail({ id: vla.id }).then(res => {
            this.categoryInfo.id = res.data.id
            this.categoryInfo.categoryCode = res.data.categoryCode
            this.categoryInfo.categoryName = res.data.categoryName
            this.categoryInfo.pCategoryCode = res.data.pCategoryCode
            this.categoryInfo.remark = res.data.remark
            this.categoryInfo.qualifyIds = res.data.qualifyIds
            this.categoryInfo.productParams = res.data.productParams
          })
        } else {
          this.resetData()
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    C_list().then(res => {
      this.categoryList = res.data
    })
    getCertification().then(res => {
      console.log(res)
      this.certificationList = res
    })
  },
  methods: {
    close() {
      this.$emit('close')
      // 重置数据
      // this.resetData()
    },
    save() {
      if (this.title == '品类新增') {
        C_add(this.categoryInfo).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })

            this.close()
            // 保存后刷新数据
            this.$emit('refresh')
          }
        })
      } else {
        // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
        console.log(this.categoryInfo.productParams)
        debugger
        C_update(this.categoryInfo).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.close()
            // 保存后刷新数据
            this.$emit('refresh')
          }
        })
      }
    },
    resetData() {
      this.categoryInfo = {
        categoryCode: '',
        categoryName: '',
        pCategoryCode: '',
        remark: '',
        qualifyIds: '',
        productParams: [
          {
            paramName: '',
            paramOrder: 0,
            paramRequire: false
          }
        ]
      }
    },
    // 删除指定数组
    removeAry(index) {
      this.categoryInfo.productParams.splice(index, 1)
    },
    //  添加数组
    pushAry() {
      this.categoryInfo.productParams.push({
        paramName: '',
        paramOrder: 0,
        paramRequire: false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.categoryDialog {
  width: 800px;
  box-sizing: border-box;

  .content {
    padding: 10px;
    display: flex;
    justify-content: space-between;

    .inputContent {
      flex: 1;
      padding: 0 10px;
      box-sizing: border-box;

      .inputbox {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
      }
    }
  }

  .AddContent {
    //max-height: 180px;
    overflow: auto;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #c9c9c9;
    padding: 10px 10px 20px;

    .addBtn {
      margin-bottom: 10px;
    }

    .addItem {
      display: flex;

      .item {
        padding-right: 10px;
        display: flex;
        align-items: center;
      }
    }
  }

  .btnBox {
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .save,
    .close {
      width: 100px;
    }
  }
}
</style>