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

      <el-form-item :label="$t('适用商品')" prop="idList">
        <products-selector :defaultIds="form.idList" v-model="form.idList" show-all @setall="toggleAll" />
      </el-form-item>

      <el-form-item :label="$t('货柜位置')" prop="containerLocation">
        <dict-selector :type="DICT_TYPE.ECW_CONTAINER_LOCATION" v-model="form.containerLocation" />
      </el-form-item>
      <el-form-item :label="$t('出运要求')" prop="requirements">
        <el-checkbox true-label="1" v-model="form.requirements">{{$t('证书要求（支持多证书）')}}</el-checkbox>
      </el-form-item>
      <el-form-item :label="$t('订单方数上限')" prop="square">
        <el-input v-model="form.square" placeholder="" class="w-200"></el-input>
      </el-form-item>
      <el-form-item :label="$t('包装要求')" prop="packaging">
        <dict-selector :type="DICT_TYPE.ECW_PACKAGING_TYPE" v-model="form.packaging" />
      </el-form-item>
      <el-form-item :label="$t('是否预约入仓')" prop="needBook">
        <dict-selector form-type="radio" :type="DICT_TYPE.ECW_YESNO" v-model="form.needBook" formatter="number" />
      </el-form-item>
      <el-form-item :label="$t('每日入仓上限')" prop="dayLimit" v-if="form.needBook">
        <el-input placeholder="" v-model="form.dayLimit" class="w-200">
          <template slot="suffix">{{$t('立方米')}}</template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('商品特性')" 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="$t('商品材质')" prop="materialType">
        <dict-selector form-type="checkbox" :type="DICT_TYPE.ECW_PRODUCT_MATERIAL" v-model="form.materialTypeArr" multiple />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">{{$t('确定')}}</el-button>
        <el-button @click="$router.back()">{{$t('返回')}}</el-button>
        <el-button type="default" @click="reset">{{$t('重置')}}</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": 0,
        "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
      }
    }, */
    'form.materialTypeArr'(typeArr){
      this.$set(this.form, 'form.materialTyp', typeArr.join(','))
    },
    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: {
    toggleAll(e){
      this.$set(this.form, 'isAllProduct', e ? 1 : 0)
    },
    /** 表单重置 */
    reset() {
      this.form = {
        "attrId": undefined,
        "containerLocation": undefined,
        "dayLimit": undefined,
        "idList": [],
        "isAllProduct": 0,
        "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)
        if(!data.isAllProduct && !data.idList.length){
          return this.$message(this.$t('请选择商品或勾选全部'))
        }
        batchUpdateProduct(data).then((response) => {
          this.$modal.msgSuccess(this.$t("修改成功"));
          this.$store.dispatch('tagsView/delCurrentView')
        });
      });
    },
  },
};
</script>