<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">
        <dict-selector :type="DICT_TYPE.ECW_CONTAINER_LOCATION" v-model="form.containerLocation" />
      </el-form-item>
      <el-form-item label="出运要求" prop="requirements">
        <el-checkbox true-label="1" v-model="form.requirements">证书要求（支持多证书）</el-checkbox>
      </el-form-item>
      <el-form-item label="订单方数上限" prop="square">
        <el-input v-model="form.square" placeholder="" class="w-200"></el-input>
      </el-form-item>
      <el-form-item label="包装要求" prop="packaging">
        <dict-selector :type="DICT_TYPE.ECW_PACKAGING_TYPE" v-model="form.packaging" />
      </el-form-item>
      <el-form-item label="是否预约入仓" prop="needBook">
        <dict-selector 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" v-if="form.needBook">
        <el-input placeholder="" v-model="form.dayLimit" class="w-200">
          <template slot="suffix">立方米</template>
        </el-input>
      </el-form-item>
      <el-form-item label="商品特性" prop="attrId">
        <!-- <dict-selector form-type="checkbox" :type="DICT_TYPE.ECW_ORDER_ATTR" v-model="form.attrId" multiple /> -->
        <el-checkbox-group v-model="attrIds">
          <el-checkbox v-for="item in attrList" :label="item.id" :key="item.id">{{item.attrName}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="商品材质" prop="materialType">
        <dict-selector 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 { getProductAttrList } from "@/api/ecw/productAttr";
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,
      attrList: [],
      attrIds:[],
      // 表单参数
      form: {
        "attrId": undefined,
        "containerLocation": undefined,
        "dayLimit": undefined,
        "idList": [],
        "isAllProduct": undefined,
        "needBook": false,
        "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
      }
    },
    attrIds(val){
      this.form.attrId = val.join(',')
    }
  },
  created() {
    this.reset()
    this.form.idList = this.$route.query && this.$route.query.ids ? [...this.$route.query.ids].map(item => { return Number(item) }) : []
    getProductAttrList().then(res => {
      this.attrList = res.data
    })
  },
  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>