<template>
  <div class="logistics">
    <Card>
      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="data"
        ref="table"
      ></Table>
    </Card>
    <Modal v-model="openModal" :title="openModalTitle" @on-ok="submit" @on-cancel="cancelModal">
      <h3 style="color: #ff3c2a; margin-bottom: 10px">是否需要电子面单</h3>
      <RadioGroup
        v-model="faceSheetForm.faceSheetFlag"
        style="margin-bottom: 20px"
        @on-change="getfaceSheetFlag($event)"
      >
        <Radio :label="true">
          <span>需要</span>
        </Radio>
        <Radio :label="false">
          <span>不需要</span>
        </Radio>
      </RadioGroup>
      <Card v-if="onpenText" class="modalStyle">
        <h3 style="color: #ff3c2a; margin-bottom: 10px">请输入详细信息</h3>
        <Form ref="formValidate" :label-width="150" label-position="right" :model="faceSheetForm" :rules="ruleValidate">
          <FormItem label="customerName" prop="customerName">
            <Input
              v-model="faceSheetForm.customerName"
              type="text"
              class="faceSheetInput"
            ></Input
            ></FormItem>
          <FormItem label="customerPwd" prop="customerPwd">
            <Input
              v-model="faceSheetForm.customerPwd"
              type="text"
              class="faceSheetInput"
            ></Input>
          </FormItem>
          <FormItem label="customerPwd" prop="monthCode">
            <Input
              v-model="faceSheetForm.monthCode"
              type="text"
              class="faceSheetInput"
            ></Input
            ></FormItem>
          <FormItem label="customerPwd" prop="sendSite">
            <Input
              v-model="faceSheetForm.sendSite"
              type="text"
              class="faceSheetInput"
            ></Input
            ></FormItem>
          <FormItem label="customerPwd" prop="sendStaff">
            <Input
              v-model="faceSheetForm.sendStaff"
              type="text"
              class="faceSheetInput"
            ></Input
            ></FormItem>
          <FormItem label="支付方式" prop="payType">
            <Select
              v-model="faceSheetForm.payType"
              class="faceSheetInput">
              <Option value="1">现付</Option>
              <Option value="2">到付</Option>
              <Option value="3">月结</Option>
              <Option value="4">第三方支付(仅SF支持)</Option>
            </Select
            ></FormItem>
          <FormItem label="快递类型" prop="expType">
            <Input
              v-model="faceSheetForm.expType"
              type="text"
              class="faceSheetInput"/>
          </FormItem>
          <div style="width:100%;text-align:center;">
            <a style="padding-right: 20px" @click="frontDownload('use')">使用说明</a>
            <a @click="frontDownload('type')">快递类型</a>
          </div>
        </Form>
      </Card>
      <br/>
    </Modal>
  </div>
</template>

<script>
import * as API_Shop from "@/api/shops";

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: "物流公司",
          key: "name",
          minWidth: 120,
          sortable: false,
        },
        {
          title: "状态",
          key: "selected",
          minWidth: 120,
          sortable: true,
          render: (h, params) => {
            if (params.row.selected === null || params.row.selected === "") {
              return h("div", [h("tag", {props: {color: "volcano"}}, "关闭")]);
            } else {
              return h("div", [h("tag", {props: {color: "green"}}, "开启")]);
            }
          }
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 200,
          render: (h, params) => {
            if (params.row.selected === null) {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "success",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                    },
                    on: {
                      click: () => {
                        this.open(params.row);
                      },
                    },
                  },
                  "开启"
                ),
              ]);
            } else {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                    },
                    on: {
                      click: () => {
                        this.close(params.row);
                      },
                    },
                  },
                  "关闭"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small",
                    },
                    on: {
                      click: () => {
                        this.getFaceSheetInfo(params.row);
                      },
                    },
                  },
                  "修改"
                ),
              ]);
            }

          },
        },
      ],
      data: [], // 表单数据
      onpenText: false,
    };
  },
  methods: {
    //获取状态
    getfaceSheetFlag(e) {
      console.log(e);
      if (e === true) {
        console.log("打开");
        this.onpenText = true;
      } else {
        console.log("关闭");
        this.onpenText = 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.onpenText = true;
      } else {
        this.onpenText = 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.onpenText = true;
          } else {
            this.faceSheetForm.faceSheetFlag = false
            this.onpenText = 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.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 === null ||  this.row.selected === "") {
        API_Shop.logisticsChecked(
          this.row.logisticsId,
          this.faceSheetForm
        ).then((res) => {
          this.openModal = false;
          this.$Modal.remove();
          if (res.success) {
            this.$Message.success("物流公司开启成功");
            this.init();
          }
        });
      } else {
        API_Shop.editChecked(this.logisticsId, this.faceSheetForm).then((res) => {
          if (res.success) {
            this.$Message.success("修改成功");
            this.init();
          }
        });
      }
    },
    // 关闭
    close(v) {
      this.$Modal.confirm({
        title: "确认关闭",
        content: "您确认关闭此物流公司?",
        loading: true,
        onOk: () => {
          API_Shop.logisticsUnChecked(v.selected).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("物流公司关闭成功");
              this.init();
            }
          });
        }
      });
    }
  },
  mounted() {
    this.init();
  },
};
</script>

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