<template>
  <div>
  <el-dialog append-to-body :title="$t('集运地址')" :visible.sync="dialogVisible" width="750px">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane
        v-for="warehouse in warehouseList"
        :label="warehouse.titleZh"
        :name="warehouse.titleEn"
        v-if="warehouse.isConsService">
        <el-descriptions class="margin-top" :column="1" border>
          <el-descriptions-item :label="$t('会员号')" span="30">
            <el-tag style="color:red;font-size: 20px;">{{ memberNumber }}</el-tag>
            <el-button type="text" @click="copyToClipboard(memberNumber)" style="float: right">{{$t('复制')}}</el-button>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('运输方式偏好')">
            <el-radio-group @change="handleTransportChange" v-model="customer.preferenceTransportType">
              <el-radio
                v-for="dict in preferenceTransportData"
                :label=parseInt(dict.value)
              >
                {{ $l(dict, "label") }}</el-radio
              >
            </el-radio-group>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('收件人姓名')">
            {{ warehouse.head }}
            <el-tag style="color:red;font-size: 20px;">{{ memberNumber }}</el-tag>
            <el-button type="text" @click="copyToClipboard(`${warehouse.head }${memberNumber}`)" style="float: right">{{$t('复制')}}</el-button>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('收件人电话')" >
            {{ warehouse.tell }}
            <el-button type="text" @click="copyToClipboard(warehouse.tell)" style="float: right">{{$t('复制')}}</el-button>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('地址')" >
            {{ warehouse.addressZh }}
            <el-tag style="color:red;font-size: 20px;">{{ memberNumber }}</el-tag>
            <el-button type="text" @click="copyToClipboard(`${warehouse.addressZh} ${memberNumber}`)" style="float: right">{{$t('复制')}}</el-button>
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    </el-tabs>

    <el-row style="padding-top: 150px;padding-left: 350px;">
      <el-button type="warning" @click="handleCopyAll">{{$t('一键复制')}}</el-button>
      <el-button type="primary" @click="showNotice = true">{{$t('入仓须知')}}</el-button>
      <el-button type="success">禁运物品</el-button>
    </el-row>
  </el-dialog>

  <el-dialog :title="$t('查看须知')" :visible.sync="showNotice" width="700px" append-to-body>
    <need-know keyname="warehousing" ref="needKnow" />
    <div style="text-align:center">
      <el-button type="primary" @click="$refs.needKnow.downloadPdf()">{{$t('下载')}}</el-button>
    </div>
  </el-dialog>
  </div>
</template>


<script>
import { getWarehouseList } from '@/api/ecw/warehouse'
import { DICT_TYPE, getDictDatas } from '@/utils/dict'
import { customerSettingButton } from '@/api/ecw/customer'
import NeedKnow from '@/components/NeedKnow'

export default {
  name: "CustomerConsAddress",
  components: { NeedKnow },

  data(){
    return{
      dialogVisible: false,
      // 默认选择一个仓库
      activeName: "Foshan",
      warehouseList: [],
      customer: [],
      memberNumber: '',
      // 入仓须知
      showNotice: false,
      // 获取运输方式偏好字典
      preferenceTransportData: getDictDatas(DICT_TYPE.ECW_PREFERENCE_TRANSPORT_TYPE),
    }
  },

  created() {
    getWarehouseList({tradeType : 2}).then((r) => {
      this.warehouseList = r.data
    })
  },

  methods:{
    /**
     * 点击集运地址后被调用
     */
    init(customer){
      // 获取用户信息
      this.customer = customer
      // 初始化时根据运输方式更新客户编号
      this.updateMemberNumber();
    },
    /**
     * 切换tab栏的时候调用
     */
    handleClick(tab, event) {
    },

    /**
     * 更新运输方式偏好对应的编号和保存设置
     */
    handleTransportChange(preferenceTransportType) {
      const param = {
        id: this.customer.id,
        preferenceTransportType: preferenceTransportType
      }
      /**
       * 修改用户运输方式偏好设置
       */
      customerSettingButton(param).then((response) => {
        this.$modal.msgSuccess(this.$t("修改成功"))
      })
      this.updateMemberNumber(preferenceTransportType)
    },

    /**
     * 更新运输方式编号
     */
    updateMemberNumber() {
      if (!this.customer?.number) return;

      let suffix = '';
      switch (this.customer.preferenceTransportType) {
        case 1:
          suffix = 'S';
          break;
        case 3:
          suffix = 'A';
          break;
      }
      this.memberNumber = this.customer.number + suffix;
    },

    /**
     * 复制功能
     */
    async copyToClipboard(text) {
      try {
        await navigator.clipboard.writeText(text);
        this.$message.success(this.$t('复制成功'));
      } catch (err) {
        this.$message.error(this.$t('复制失败'));
      }
    },

    /**
     * 一键复制
     */
    handleCopyAll() {
      const currentWarehouse = this.warehouseList.find(
        item => item.titleEn === this.activeName
      );

      if (!currentWarehouse) return;

      // 构建复制内容
      const content = [
        `${currentWarehouse.head}${this.memberNumber}`,
        `${currentWarehouse.tell}`,
        `${currentWarehouse.addressZh} ${this.memberNumber}`
      ].join(',');

      this.copyToClipboard(content);
    },


  }
}
</script>
