<template>
  <el-form
    :model="itemForm"
    :rules="rules"
    ref="formName"
    label-width="90px"
    class="formBox"
  >
    <el-form-item label="分类" prop="urlIdList" label-width="60px">
      <!-- <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"> -->
      <el-cascader
        :key="keyValue"
        v-model="itemForm.urlIdList"
        :options="classList"
        :props="defaultProps"
        separator="-"
        filterable
        ref="cascader"
      >
      </el-cascader>
      <!-- </el-tooltip> -->
    </el-form-item>
    <el-form-item label="物品编码" prop="itemCode">
      <el-input
        placeholder="请输入"
        v-model="itemForm.itemCode"
        maxlength="9"
        :disabled="itemForm.isCitation"
      >
        <template slot="prepend">{{ prefix }}</template>
      </el-input>
    </el-form-item>
    <el-form-item label="物品名称" prop="name">
      <el-input placeholder="请输入" v-model="itemForm.name"></el-input>
    </el-form-item>
    <el-form-item label="计量单位" prop="measuringUnit">
      <el-input
        placeholder="请输入"
        v-model="itemForm.measuringUnit"
      ></el-input>
    </el-form-item>
    <el-form-item label="包装单位" prop="packingUnit">
      <el-input placeholder="请输入" v-model="itemForm.packingUnit"></el-input>
    </el-form-item>
    <!-- oninput="value=value.replace(/[^0-9.]/g,'')" -->
    <el-form-item label="参考单价" prop="univalence">
      <div class="twobox">
        <el-input-number
          placeholder="请输入"
          v-model="itemForm.univalence"
          :min="0"
          style="width: 80%; margin-right: 10px"
        ></el-input-number>
        <DictSelection
          dictName="金额单位"
          v-model="itemForm.univalenceUnit"
          class="w40"
        ></DictSelection>
        <!-- <el-select
          v-model="itemForm.univalenceUnit"
          placeholder="请选择"
          class="w40"
        >
          <el-option
            v-for="item in priceList"
            :key="item.id"
            :label="item.value"
            :value="item.name"
          >
          </el-option>
        </el-select> -->
      </div>
    </el-form-item>
    <el-form-item label="保质期" prop="expirationDate">
      <div class="twobox">
        <el-input-number
          placeholder="请输入"
          type="number"
          v-model="itemForm.expirationDate"
          :min="0"
          style="width: 80%; margin-right: 10px"
        ></el-input-number>
        <DictSelection
          dictName="时间单位"
          v-model="itemForm.expirationDateUnit"
          class="w40"
        ></DictSelection>
        <!-- <el-select
          v-model="itemForm.expirationDateUnit"
          placeholder="请选择"
          class="w40"
        >
          <el-option
            v-for="item in dateList"
            :key="item.id"
            :label="item.value"
            :value="item.name"
          >
          </el-option>
        </el-select> -->
      </div>
    </el-form-item>
    <el-form-item label="安全库存" prop="safeStock">
      <el-input placeholder="请输入" v-model="itemForm.safeStock"></el-input>
    </el-form-item>
    <el-form-item label="盘点模式" prop="takeStockPattern">
      <el-radio-group v-model="itemForm.takeStockPattern">
        <el-radio :label="0">逐个盘点</el-radio>
        <el-radio :label="1">批量盘点</el-radio>
        <!-- <el-radio :label="2">混合模式</el-radio> -->
      </el-radio-group>
    </el-form-item>
    <!--         <el-form-item label="允许转资产" prop="isTransferAssets">
             <el-switch v-model="itemForm.isTransferAssets"
                active-value="true"
                inactive-value="false"
             > </el-switch>
         </el-form-item> -->
    <el-form-item label="允许拆包" prop="unpack">
      <el-switch
        v-model="itemForm.unpack"
        :active-value="1"
        :inactive-value="0"
        :disabled="itemForm.isCitation"
      >
      </el-switch>
    </el-form-item>
    <el-form-item label="描述" prop="description">
      <el-input
        type="textarea"
        rows="3"
        resize="none"
        placeholder="请输入"
        v-model="itemForm.description"
      ></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
  import { getTreeByType } from '@/api/classifyManage';
  import { debounce } from 'throttle-debounce';
  // import dictMixins from "@/mixins/dictMixins"

  export default {
    // mixins:[dictMixins],
    props: {
      itemForm: {
        type: Object,
        default: {}
      },
      prefix: {
        type: String,
        default: ''
      },
      defaultNum: {
        type: String,
        default: ''
      }
    },

    data () {
      let validateCode = (rule, value, callback) => {
        let reg = /[\u4e00-\u9fa5]/;
        // console.log('reg.test(value)',reg.test(value))
        if (reg.test(value)) {
          callback(new Error('仅支持英文、数字及特殊字符'));
        } else {
          callback();
        }
      };
      return {
        classList: [],
        rules: {
          urlIdList: [
            {
              type: 'array',
              required: true,
              message: '请选择分类',
              trigger: 'change'
            }
          ],
          itemCode: [
            { required: true, message: '请输入物品编码', trigger: 'blur' },
            { validator: validateCode, trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入物品名称', trigger: 'blur' }
          ],
          measuringUnit: [
            { required: true, message: '请输入计量单位', trigger: 'blur' }
          ],
          packingUnit: [
            { required: true, message: '请输入包装单位', trigger: 'blur' }
          ],
          takeStockPattern: [
            { required: true, message: '请选择一个盘点模式', trigger: 'change' }
          ]
        },
        priceList: [
          { id: 0, value: '元', name: 'yuan' },
          { id: 1, value: '万元', name: 'wanyuan' }
        ],
        dateList: [
          { id: 0, value: '分钟', name: 'minute' },
          { id: 1, value: '小时', name: 'hour' },
          { id: 2, value: '天', name: 'day' },
          { id: 3, value: '月', name: 'month' },
          { id: 4, value: '年', name: 'year' }
        ],
        // itemForm:{
        //   priceType:1, dateType:1
        // },
        defaultProps: {
          children: 'children',
          value: 'id',
          label: 'name'
        },
        keyValue: 0
      };
    },
    watch: {
      defaultNum: {
        immediate: true,
        handler () {
          this.keyValue++;
          this.getTreeList();
        }
      }
    },
    created () {
      // this.requestDict('金额单位')
      // this.requestDict('时间单位')
      this.getTreeList = debounce(500, this.getTreeList);
    },
    methods: {
      async getTreeList () {
        const res = await getTreeByType(this.defaultNum);
        if (res.code === '0') {
          this.classList = res.data;
        }
      },
      //子组件接收callback为父组件传过来的next()方法
      validateForm (callback) {
        // let flag = true;
        //开始表单校验
        this.$refs.formName.validate((valid) => {
          callback(valid);
        });
      },

      getText () {
        // 获取节点下的汉字
        let pathName = this.$refs.cascader
          .getCheckedNodes()[0]
          .pathLabels.toString();
        let pathId = this.$refs.cascader.getCheckedNodes()[0].path;
        pathId = pathId[pathId.length - 1];
        //用for循环遍历获取的数据,并把逗号替换
        for (let i = 0; i < pathName.length; i++) {
          if (pathName[i] === ',') {
            pathName = pathName.replace(pathName[i], '-');
          }
        }
        return { pathName, pathId };
      }
    }
  };
</script>

<style lang="scss" scoped>
  .formBox :deep(.el-form-item) {
    margin-bottom: 17px;
    .twobox {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .el-form-item__content .el-cascader {
      width: 100%;
    }
    .w60.el-input--medium {
      width: 60%;
      margin-right: 5px;
    }
    .el-input--small .el-input__inner {
      height: 36px;
      line-height: 36px;
    }
    .el-select.el-select--medium {
      width: 100%;
    }
    .w40 {
      width: 40% !important;
    }
    .el-radio {
      display: block;
      margin-top: 10px;
    }
  }
</style>
