<!--品类新增弹窗-->
<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.id"
                  :label="item.categoryName"
                  :value="item.id"
                />
              </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">
              <red-star />
              <input-vue title="" class="inputWidth">
                <el-checkbox v-model="item.paramRequire">
                  是否必填
                </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,
    dialogHeader,
    InputNumber,
    RedStar,
    Message
  },
  props: {
    isShowInfo: {
      type: Boolean,
      default: true
    },
    dataInfo: {
      type: Object
    },
    title: ''
  },
  data() {
    return {
      // 品类信息
      categoryInfo: {
        categoryCode: '',
        categoryName: '',
        pCategoryCode: '',
        remark: '',
        qualifyIds: '',
        productParams: [
          {
            paramName: '',
            paramOrder: 0,
            paramRequire: false
          }
        ]
      },
      categoryList: [],
      // 资质列表
      certificationList: []
    }
  },
  watch: {
    dataInfo: {
      handler(vla) {
        if (vla != '') {
          // 编辑操作
          if (!vla.id) return
          detail({ id: vla.id }).then(res => {
            this.categoryInfo.id = res.id
            this.categoryInfo.categoryCode = res.categoryCode
            this.categoryInfo.categoryName = res.categoryName
            this.categoryInfo.pCategoryCode = res.pCategoryCode
            this.categoryInfo.remark = res.remark
            this.categoryInfo.qualifyIds = res.qualifyIds
            this.categoryInfo.productParams = this.dealAry2(res.productParams)
          })
          // this.categoryInfo.id = vla.id
          // this.categoryInfo.categoryCode=vla.categoryCode
          // this.categoryInfo.categoryName=vla.categoryName
          // this.categoryInfo.pCategoryCode=vla.pCategoryCode
          // this.categoryInfo.remark=vla.remark
          // this.categoryInfo.qualifyIds=vla.qualifyIds
          // this.categoryInfo.productParams=this.dealAry2(vla.productParams)
          // this.categoryInfo = {
          //   id:vla.id,
          //   categoryCode:vla.categoryCode,
          //   categoryName:vla.categoryName,
          //   pCategoryCode:vla.pCategoryCode,
          //   remark:vla.qualifyIds,
          //   qualifyIds:vla.qualifyIds
          // }
        } 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()
    },
    // 数据处理
    dealAry2(productParams) { //  number 转 boolean
      if (productParams.lenght < 1 || productParams == '') {
        return [{
          paramName: '',
          paramOrder: 0,
          paramRequire: false
        }]
      }
      productParams.forEach(item => {
        if (item.paramRequire == '1') {
          item.paramRequire = true
        } else {
          item.paramRequire = false
        }
      })
      return productParams
    },
    dealAry(productParams) { //  boolean 转 number
      if (productParams.lenght < 1 || productParams == '') {
        return [{
          paramName: '',
          paramOrder: 0,
          paramRequire: false
        }]
      }
      productParams.forEach(item => {
        if (item.paramRequire) {
          item.paramRequire = '1'
        } else {
          item.paramRequire = '0'
        }
      })
      return productParams
    },
    save() {
      if (this.title == '品类新增') {
        this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
        C_add(this.categoryInfo).then(res => {
          console.log(res, res != '')
          if (res != '') {
            this.$message({
              message: '保存成功',
              type: 'success'
            })

            this.close()
            // 保存后刷新数据
            this.$emit('refresh')
          }
        })
      } else {
        this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
        console.log(this.categoryInfo.productParams)
        C_update(this.categoryInfo).then(res => {
          if (res != '') {
            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 #999;
    padding: 10px;

    .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>