<template>
  <div class="GZattributeEditor">
    <van-nav-bar class="navBar" title="公装经销商编辑" left-arrow @click-left="onClickLeft" />
    <div class="content" v-if="detail">
      <van-form ref="tabstoreVal" @submit="onSubmit">
        <van-field
          label="是否终端客户"
          :rules="[{ required: true, message: '请选择是否终端客户' }]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
          <template #input>
            <van-radio-group v-model="detail.terminalCustomer" direction="horizontal">
              <van-radio name="是">是</van-radio>
              <van-radio name="否">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-if="detail.terminalCustomer == '否'"
          label="是否双包客户"
          :rules="[{ required: true, message: '请选择是否双包客户' }]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
          <template #input>
            <van-radio-group v-model="detail.doubleCustomer" direction="horizontal">
              <van-radio name="是">是</van-radio>
              <van-radio name="否">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-if="detail.doubleCustomer == '是' && detail.terminalCustomer == '否'"
          :rules="[{ required: true, message: '请选择客户类型' }]"
          autosize
          type="textarea"
          label="客户类型">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
          <template #input>
            <van-checkbox-group v-model="detail.customerType" direction="horizontal">
              <van-checkbox
                v-for="(item, index) in doubleustomer"
                :name="item.dictLabel"
                shape="square"
                :key="index">
                {{ item.dictValue }}
              </van-checkbox>
            </van-checkbox-group>
          </template>
        </van-field>
        <van-field
          v-if="detail.terminalCustomer == '否'"
          autosize
          type="textarea"
          label="渠道类型"
          :rules="[{ required: true, message: '请选择渠道类型' }]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
          <template #input>
            <van-radio-group v-model="detail.channelType" direction="horizontal">
              <van-radio
                v-for="(item, index) in channelTypeArr"
                :name="item.dictLabel"
                :key="index">
                {{ item.dictValue }}
              </van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-form>
    </div>
    <div class="footer-btn">
      <van-button
        style="color: white; background: rgb(0, 87, 186); border-radius: 6px; width: 90%"
        @click="confirmShare">
        保 存
      </van-button>
    </div>
  </div>
</template>

<script>
import { getDictOption } from '@/api/index';
import { getGzVisitLabel, updateVisitLabel } from '@/api/storeManagement';
export default {
  name: 'GZattributeEditor',
  data() {
    return {
      detail: null,
      channelTypeArr: [],
      doubleustomer: [],
    };
  },
  activated() {
    this.detail = null;
    this.toastLoading(0, '加载中...', true);
    // 公装拜访标签渠道类型：gz_visit_label_channel_type 公装拜访标签双包客户：gz_visit_label_double_customer
    Promise.all([
      this.getDictOptionFun('gz_visit_label_channel_type'),
      this.getDictOptionFun('gz_visit_label_double_customer'),
    ]).then((res) => {
      this.channelTypeArr = res[0];
      this.doubleustomer = res[1];
      console.log(this.doubleustomer);
      this.getDetaild();
    });
  },
  methods: {
    getDictOptionFun(type) {
      return new Promise((resolve, reject) => {
        getDictOption({}, type).then((res) => {
          resolve(res.data);
        });
      });
    },
    getDetaild() {
      getGzVisitLabel({ storeCode: this.$route.query.storeCode }).then((res) => {
        this.toastLoading().clear();
        if (res.code == 200) {
          res.data.customerType = res.data.customerType ? res.data.customerType.split(',') : [];
          this.detail = res.data;
        }
      });
    },
    // 保存
    confirmShare() {
      this.$refs.tabstoreVal.submit();
    },
    onSubmit(value) {
      this.toastLoading(0, '加载中...', true);
      let params = JSON.parse(JSON.stringify(this.detail));
      params.customerType = params.customerType.join(',');
      params.storeCode = this.$route.query.storeCode;
      params.chainCode = this.$route.query.chainCode;
      if (params.terminalCustomer == '是') {
        params.doubleCustomer = null;
        params.customerType = '';
        params.channelType = '';
      }
      if (params.doubleCustomer == '否') params.customerType = '';
      updateVisitLabel(params).then((res) => {
        this.toastLoading().clear();
        if (res.code == 200) {
          this.$toast(res.msg);
          this.$router.go(-1);
        } else {
          this.$toast(res.msg);
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
.GZattributeEditor {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  .content {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    padding: 10px 15px;
    margin-top: 10px;
    background: #fff;
    .van-cell {
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
    }
    .van-field__label {
      width: 9em;
    }
    .van-checkbox--horizontal {
      margin-bottom: 10px;
      width: 100%;
    }
    .van-radio--horizontal {
      margin-bottom: 10px;
    }
  }
  .footer-btn {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
  }
}
</style>
