<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">

      <el-form-item label="适用商品" prop="idList">
        <products-selector :defaultIds="form.idList" v-model="form.idList" />
      </el-form-item>

      <el-form-item label="货柜位置" prop="containerLocation">
        <el-checkbox style="width: 100px" v-model="checked[0]">需要修改</el-checkbox>
        <dict-selector v-if="checked[0]" :type="DICT_TYPE.ECW_CONTAINER_LOCATION" v-model="form.containerLocation" />
      </el-form-item>
      <el-form-item label="出运要求" prop="requirements">
        <el-checkbox style="width: 100px;margin-right: 0;" v-model="checked[1]">需要修改</el-checkbox>
        <el-checkbox v-if="checked[1]" true-label="1" v-model="form.requirements">证书要求（支持多证书）</el-checkbox>
      </el-form-item>
      <el-form-item label="方数要求" prop="square">
        <el-checkbox style="width: 100px" v-model="checked[2]">需要修改</el-checkbox>
        <el-input v-if="checked[2]" v-model="form.square" placeholder="" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="包装要求" prop="packaging">
        <el-checkbox style="width: 100px" v-model="checked[3]">需要修改</el-checkbox>
        <dict-selector v-if="checked[3]" :type="DICT_TYPE.ECW_PACKAGING_TYPE" v-model="form.packaging" />
      </el-form-item>
      <el-form-item label="需要预约入仓" prop="needBook">
        <el-checkbox style="width: 100px" v-model="checked[4]">需要修改</el-checkbox>
        <dict-selector v-if="checked[4]" formatter="bool" form-type="radio" :type="DICT_TYPE.ECW_YESNO" v-model="form.needBook" :formater="Boolean" />
      </el-form-item>
      <el-form-item label="每日入仓上限" prop="dayLimit">
        <el-checkbox style="width: 100px" v-model="checked[5]">需要修改</el-checkbox>
        <el-input v-if="checked[5]" placeholder="" v-model="form.dayLimit" style="width: 200px">
          <template slot="suffix">立方米</template>
        </el-input>
      </el-form-item>
      <el-form-item label="商品特性" prop="attrId">
        <el-checkbox style="width: 100px" v-model="checked[6]">需要修改</el-checkbox>
        <dict-selector v-if="checked[6]" form-type="checkbox" :type="DICT_TYPE.ECW_ORDER_ATTR" v-model="form.attrId" multiple />
      </el-form-item>
      <el-form-item label="商品材质" prop="materialType">
        <el-checkbox style="width: 100px" v-model="checked[7]">需要修改</el-checkbox>
        <dict-selector v-if="checked[7]" form-type="checkbox" :type="DICT_TYPE.ECW_PRODUCT_MATERIAL" v-model="form.materialType" multiple />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="$router.back()">返 回</el-button>
        <el-button type="default" @click="reset">重 置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { batchUpdateProduct } from '@/api/ecw/product';

import CustomersSelector from '@/components/CustomersSelector'
import { getDictData } from '@/utils/dict'
import RoutersSelector from '@/components/RoutersSelector'
import ProductsSelector from '@/components/ProductsSelector'
import Editor from '@/components/Editor'
import Selector from '@/components/Selector/index'
export default {
  name: "AttrEdit",
  components: { CustomersSelector, RoutersSelector, ProductsSelector, Editor, Selector },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 表单参数
      form: {
        "attrId": undefined,
        "containerLocation": undefined,
        "dayLimit": undefined,
        "idList": [],
        "isAllProduct": undefined,
        "needBook": undefined,
        "packaging": undefined,
        "requirements": undefined,
        "square": undefined,
        "materialType": undefined
      },
      // 表单校验
      rules: {},
      checked: [false, false, false, false, false, false, false, false]
    };
  },
  computed: {

  },
  watch: {
    'form.idList'(val) {
      if (val.length > 0) {
        this.form.isAllProduct = 0
      } else {
        this.form.isAllProduct = 1
      }
    }
  },
  created() {
    this.reset()
    this.form.idList = this.$route.query && this.$route.query.ids ? [...this.$route.query.ids].map(item => { return Number(item) }) : []
  },
  methods: {
    /** 表单重置 */
    reset() {
      this.form = {
        "attrId": undefined,
        "containerLocation": undefined,
        "dayLimit": undefined,
        "idList": [],
        "isAllProduct": undefined,
        "needBook": undefined,
        "packaging": undefined,
        "requirements": undefined,
        "square": undefined,
        "materialType": undefined
      };
      this.resetForm("form");
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        let data = Object.assign({}, this.form)
        batchUpdateProduct(data).then((response) => {
          this.$modal.msgSuccess("修改成功");
          this.$router.back();
        });
      });
    },
  },
};
</script>