<template>
  <div class="logistics">
    <t-card>
      <t-table :loading="loading" :columns="columns" :data="data">
        <template #selected="{ row }">
          <t-tag :theme="row.selected ? 'success' : 'danger'">{{ row.selected ? '开启' : '关闭' }}</t-tag>
        </template>
        <template #action="{ row }">
          <a v-if="!row.selected" style="color:#2d8cf0;cursor:pointer;text-decoration:none" @click="open(row)">开启</a>
          <template v-else>
            <a style="color:#2d8cf0;cursor:pointer;text-decoration:none" @click="close(row)">关闭</a>
            <span style="margin:0 8px;color:#dcdee2">|</span>
            <a style="color:#2d8cf0;cursor:pointer;text-decoration:none" @click="getFaceSheetInfo(row)">修改</a>
          </template>
        </template>
      </t-table>
    </t-card>
    <t-dialog :visible="openModal" :header="openModalTitle" :width="700" @close="cancelModal">
      <h3 style="color: #ff3c2a; margin-bottom: 10px">是否需要电子面单</h3>
      <div style="margin-bottom: 10px;">
        <t-button :theme="faceSheetForm.faceSheetFlag ? 'primary' : 'default'" @click="faceSheetForm.faceSheetFlag = true">需要</t-button>
        <t-button :theme="!faceSheetForm.faceSheetFlag ? 'primary' : 'default'" @click="faceSheetForm.faceSheetFlag = false" style="margin-left:8px">不需要</t-button>
      </div>
      <t-card v-if="openText" class="modalStyle">
        <h3 style="color: #ff3c2a; margin-bottom: 10px">请输入详细信息</h3>
        <t-form ref="formValidate" :data="faceSheetForm" :labelWidth="250">
          <t-form-item label="电子面单客户账户/月结账号/客户代码" name="customerName">
            <t-input v-model="faceSheetForm.customerName" class="faceSheetInput" />
          </t-form-item>
          <t-form-item label="客户密码/电子面单密码" name="customerPwd">
            <t-input v-model="faceSheetForm.customerPwd" class="faceSheetInput" />
          </t-form-item>
          <t-form-item label="电子面单密钥" name="monthCode">
            <t-input v-model="faceSheetForm.monthCode" class="faceSheetInput" />
          </t-form-item>
          <t-form-item label="归属网点/网点编码/电子面单承载编号" name="sendSite">
            <t-input v-model="faceSheetForm.sendSite" class="faceSheetInput" />
          </t-form-item>
          <t-form-item label="收件快递员" name="sendStaff">
            <t-input v-model="faceSheetForm.sendStaff" class="faceSheetInput" />
          </t-form-item>
          <t-form-item label="支付方式" name="payType">
            <t-select v-model="faceSheetForm.payType" class="faceSheetInput">
              <t-option value="1" label="现付" />
              <t-option value="2" label="到付" />
              <t-option value="3" label="月结" />
              <t-option value="4" label="第三方支付(仅SF支持)" />
            </t-select>
          </t-form-item>
          <t-form-item label="快递类型" name="expType">
            <t-input v-model="faceSheetForm.expType" class="faceSheetInput" />
          </t-form-item>
          <div style="width:100%;text-align:center;">
            <a style="padding-right: 20px" @click="frontDownload('use')">使用说明</a>
            <a @click="frontDownload('type')">快递类型</a>
          </div>
        </t-form>
      </t-card>
      <template #footer>
        <t-button variant="text" @click="cancelModal">取消</t-button>
        <t-button theme="primary" @click="submit">保存</t-button>
      </template>
    </t-dialog>
  </div>
</template>

<script>
import * as API_Shop from "@/api/shops";
import { MessagePlugin, DialogPlugin } from "tdesign-vue";

export default {
  name: "logistics",
  data() {
    return {
      row: {},
      openModal: false,
      loading: true, // 表单加载状态
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      openModalTitle: '开启信息',
      ruleValidate: {
        // customerName: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
        // payType: [{ required: true, message: "请填写必填项" ,trigger: "change" }],
        // expType: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
        // customerPwd: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
        // monthCode: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
        // sendSite: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
        // sendStaff: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],

      },
      faceSheetForm: {
        faceSheetFlag: false,
        customerName: "",
        payType: '1',
        expType: '1',
        customerPwd: "",
        monthCode: "",
        sendSite: "",
        sendStaff: "",
      },
      columns: [
        { title: "物流公司", colKey: "name", minWidth: 120 },
        { title: "状态", colKey: "selected", minWidth: 120 },
        { title: "操作", colKey: "action", align: "center", width: 200 },
      ],
      data: [], // 表单数据
      openText: false,
    };
  },
  watch: {
    'faceSheetForm.faceSheetFlag'(val) {
      this.openText = val ? true : false
      console.log(this.openText )
    }
  },
  methods: {
    //获取状态
    getfaceSheetFlag(e) {
      console.log(e);
      if (e === true) {
        console.log("打开");
        this.openText = true;
      } else {
        console.log("关闭");
        this.openText = false;
      }
    },
    // 初始化数据
    init() {
      this.getDataList();
    },
    // 获取数据
    getDataList() {
      this.loading = true;
      API_Shop.getLogistics().then((res) => {
        this.loading = false;
        if (res.success) {
          this.data = res.result;
        }
      });
      this.loading = false;
    },
    cancelModal() {
      this.faceSheetFlag = false;
      this.faceSheetForm.faceSheetFlag = false;
    },
    // 开启
    open(v) {
      this.row = v;
      this.openModal = true;
      this.searchForm.faceSheetFlag = "false"; //开弹框 等于v
      if (this.searchForm.faceSheetFlag == "true") {
        this.openText = true;
      } else {
        this.openText = false;
      }
    },
    //修改
    getFaceSheetInfo(v) {
      this.row = v;
      this.logisticsId = v.logisticsId;
      this.openModalTitle = '修改信息';
      API_Shop.getIsCheck(this.logisticsId).then((res) => {
        if (res.success) {
          // this.searchForm = res.result.recordes;
          this.faceSheetForm.faceSheetFlag = res.result.faceSheetFlag; //开弹框 等于v
          if (this.faceSheetForm.faceSheetFlag === true) {
            this.openText = true;
          } else {
            this.faceSheetForm.faceSheetFlag = false
            this.openText = false;
          }
          this.faceSheetForm.customerName = res.result.customerName;
          this.faceSheetForm.customerPwd = res.result.customerPwd;
          this.faceSheetForm.monthCode = res.result.monthCode;
          this.faceSheetForm.sendSite = res.result.sendSite;
          this.faceSheetForm.sendStaff = res.result.sendStaff;
          this.faceSheetForm.payType = res.result.payType;
          this.faceSheetForm.expType = res.result.expType;
        }
      });
      this.openModal = true;
    },
    frontDownload(val) {
      var a = document.createElement("a"); //创建一个<a></a>标签
      //根据点击按钮来下载不同文件
      if (val === 'use') {
        a.href = "static/instructions.xlsx"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
        a.download = "使用说明.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
      } else if (val === 'type') {
        a.href = "static/logisticsType.xlsx"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
        a.download = "快递类型.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
      }
      a.style.display = "none"; // 障眼法藏起来a标签
      document.body.appendChild(a); // 将a标签追加到文档对象中
      a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove(); // 一次性的，用完就删除a标签
    },

    submit() {
      if (!this.row.selected) {
        API_Shop.logisticsChecked(
          this.row.logisticsId,
          this.faceSheetForm
        ).then((res) => {
          this.openModal = false;
          if (res.success) {
            MessagePlugin.success("物流公司开启成功");
            this.init();
          }
        });
      } else {
        API_Shop.editChecked(this.logisticsId, this.faceSheetForm).then((res) => {
          if (res.success) {
            MessagePlugin.success("修改成功");
            this.init();
          }
        });
      }
    },
    // 关闭
    close(v) {
      DialogPlugin.confirm({
        header: "确认关闭",
        content: "您确认关闭此物流公司?",
        theme: "warning",
        onConfirm: () => {
          API_Shop.logisticsUnChecked(v.logisticsId).then((res) => {
            if (res.success) {
              MessagePlugin.success("物流公司关闭成功");
              this.init();
            }
          });
        }
      });
    }
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.faceSheetInput {
  width: 300px;
}
</style>
