<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
              title="编号"
              class="inputWidth"
              v-model="categoryInfo.categoryCode"
            ></input-vue>
          </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-option>
              </el-select>
            </input-vue>
          </div>
          <div class="inputbox">
            <red-star />
            <input-vue title="备注" class="inputWidth">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                v-model="categoryInfo.remark"
              >
              </el-input>
            </input-vue>
          </div>
        </div>
        <div class="inputContent">
          <div class="inputbox">
            <red-star />
            <input-vue
              title="名称"
              class="inputWidth"
              v-model="categoryInfo.categoryName"
            ></input-vue>
          </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-option>
              </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 title="名称" class="inputWidth" v-model="item.paramName"></input-vue>
          </div>
          <div class="number item">
            <red-star />
            <input-vue title="排序" class="inputWidth">
              <input-number v-model="item.paramOrder"></input-number>
            </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 {
  props: {
    isShowInfo: {
      type: Boolean,
      default: true,
    },
    dataInfo:{
      type: Object,
    },
    title:''
  },
  components: {
    inputVue,
    dialogHeader,
    InputNumber,
    RedStar,
    Message
},
  data () {
    return {
      // 品类信息
      categoryInfo:{
        categoryCode:'', 
        categoryName:'',
        pCategoryCode:'',
        remark:'',
        qualifyIds:'',
        productParams:[
          {
          paramName:'',
          paramOrder:0,
          paramRequire:false
          }
        ],
      },
      categoryList:[],
      // 资质列表
      certificationList:[]
    }
  },
  mounted(){
    C_list().then(res => {
      this.categoryList= res
    })
    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
          })
    }
  },
  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
    }
  }
};
</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>