<template>
  <Container>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="配送方式" name="Delivery"></el-tab-pane>
      <el-tab-pane label="快递接口" name="Logistics"></el-tab-pane>
    </el-tabs>
    <div v-if="activeName === 'Delivery'" class="DeliverySet">
      <ul>
        <li
          v-for="(item, index) in delivery_list"
          :key="index"
          class="delivery-item"
        >
          <div class="clearfix di-top">
            <div class="float_left">
              {{ item.title }}
              <span v-if="item.defaultStatus === 5" class="default-tag">
                默认
              </span>
            </div>
            <div class="float_right">
              <el-switch
                v-model="item.enableStatus"
                active-color="#36B365"
                inactive-color="#ff4949"
                active-text="开启"
                inactive-text=""
                :active-value="5"
                :inactive-value="4"
                @change="statusSet(item)"
              ></el-switch>
            </div>
          </div>
          <div v-if="item.deliveryType === 1" class="desc-div clearfix">
            <div class="float_left">
              启用快递发货后，买家下单可以选择快递发货，由你安排快递送货上门。
            </div>
            <div class="float_right">
              <el-button
                v-if="
                  item.defaultStatus === 4 &&
                  $accessCheck($Access.DeliveryUpdateDefaultStatus)
                "
                size="small"
                type="text"
                @click="defaultData(item.id)"
              >
                设为默认
              </el-button>
              <el-button
                v-if="$accessCheck($Access.DeliverygetInfo)"
                size="small"
                type="text"
                @click="
                  $router.push(
                    '/SystemSettings/jiaoyiset/DeliveryTemplate/' + item.id
                  )
                "
              >
                编辑运费模板
              </el-button>
            </div>
          </div>
          <div v-if="item.deliveryType === 2" class="desc-div clearfix">
            <div class="float_left">
              启用自提后，买家可以就近选择商品自提点，买家下单后，您需要确保买家指定的自提点商品库存充足。
            </div>
            <div class="float_right">
              <el-button
                v-if="
                  item.defaultStatus === 4 &&
                  $accessCheck($Access.DeliveryUpdateDefaultStatus)
                "
                size="small"
                type="text"
                @click="defaultData(item.id)"
              >
                设为默认
              </el-button>
              <el-button
                v-if="$accessCheck($Access.DeliverygetInfo)"
                size="small"
                type="text"
                @click="
                  $router.push(
                    '/SystemSettings/jiaoyiset/SelffetchList/' + item.id
                  )
                "
              >
                查看自提点
              </el-button>
            </div>
          </div>
          <div v-if="item.deliveryType === 3" class="desc-div clearfix">
            <div class="float_left">
              启用物流发货后，买家下单可以选择物流发货，由你安排物流送货上门
            </div>
            <div class="float_right">
              <el-button
                v-if="
                  item.defaultStatus === 4 &&
                  $accessCheck($Access.DeliveryUpdateDefaultStatus)
                "
                size="small"
                type="text"
                @click="defaultData(item.id)"
              >
                设为默认
              </el-button>

              <el-button
                size="small"
                type="text"
                @click="logisticsFlagTrue(item.id)"
              >
                设置提示信息
              </el-button>
            </div>
          </div>
        </li>
      </ul>
      <!--      <el-button-->
      <!--        size="small"-->
      <!--        type="text"-->
      <!--        @click="$router.push('/SystemSettings/jiaoyiset/Dispatch')"-->
      <!--      >-->
      <!--        编辑同城配送-->
      <!--      </el-button>-->
    </div>
    <div v-else>
      <Logistics />
    </div>
    <el-dialog
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      title="物流提示信息"
      :visible.sync="logisticsFlag"
      width="30%"
      @close="closeDialog('form')"
    >
      <el-form
        ref="form"
        :model="logistics_prompt"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="提示信息" prop="logistics_value">
          <el-input v-model="logistics_prompt.logistics_value"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog('form')">取 消</el-button>
        <el-button
          :loading="loading"
          type="primary"
          @click="updateLogisticsReminder"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </Container>
</template>

<script>
  import {
    AllDelivery,
    addDelivery,
    editDelivery,
    delDelivery,
    DeliveryupdateDefaultStatus,
    DeliveryupdateEnableStatus,
    updateLogisticsReminder,
  } from "@/api/System";
  import Logistics from "./Logistics.vue";
  export default {
    name: "DeliverySet",
    components: {
      Logistics,
    },
    data() {
      return {
        activeName: "Delivery",
        pageSize: 10,
        page: 1,
        total: 0,
        delivery_list: [],
        logisticsFlag: false,
        logistics_prompt: {
          logistics_value: "",
        },
        rules: {
          logistics_value: [
            { required: true, message: "请输入消息提示信息", trigger: "blur" },
          ],
        },
        logistics_id: "",
        logistics_list: {},
        loading: false,
      };
    },
    created() {
      this.getData();
    },
    activated() {
      if (this.$_isInit()) return;
      this.getData();
    },
    methods: {
      async getData() {
        const data = await AllDelivery({
          page: this.page,
          pageSize: this.pageSize,
        });

        this.delivery_list = data.data;
        this.total = data.pageTotal;
        this.delivery_list.forEach((item) => {
          if (item.signId === 3) {
            this.logistics_list = item;
          }
        });
        this.logistics_prompt.logistics_value = this.logistics_list.setData
          ? this.logistics_list.setData.reminder || ""
          : "";
      },
      sizeChange(size) {
        this.pageSize = size;
        this.pageChange(1);
      },
      pageChange(page) {
        this.page = page;
        this.getData();
      },
      openModel(isEdit, row) {
        this.add_form = {
          title: "",
          defaultStatus: 5,
          enableStatus: 5,
        };
        this.show_model = true;
        this.is_edit = isEdit;
        if (row) {
          this.delivery_id = row.id;
          this.add_form = {
            title: row.title,
            defaultStatus: row.defaultStatus,
            enableStatus: row.enableStatus,
          };
        }
      },
      async addData() {
        let target = {};

        if (!this.is_edit) {
          target = await addDelivery({
            ...this.add_form,
          });
        } else {
          target = await editDelivery(this.delivery_id, {
            ...this.add_form,
          });
        }
        const data = target;

        this.show_model = false;
        this.$message({
          type: "success",
          message: "提交成功!",
        });
        this.pageChange(1);
      },
      delData(id) {
        this.$confirm("确定要删除该配送方式吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await delDelivery(id);

          await this.getData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      },
      defaultData(id) {
        this.$confirm("确定要将该配送方式设为默认吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await DeliveryupdateDefaultStatus(id, {
            defaultStatus: "5",
          });

          await this.getData();
          this.$message({
            type: "success",
            message: "设置成功!",
          });
        });
      },
      statusSet(row) {
        const title = row.enableStatus === 4 ? "禁用" : "启用";
        this.$confirm("确定要" + title + "该配送方式吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const { data } = await DeliveryupdateEnableStatus(row.id, {
              enableStatus: row.enableStatus,
            });

            this.getData();
            this.$message({
              type: "success",
              message: "设置成功!",
            });
          })
          .catch(() => {
            row.enableStatus = row.enableStatus === 4 ? 5 : 4;
          });
      },
      closeDialog(formName) {
        this.logisticsFlag = false;
        this.$refs[formName].resetFields();
      },
      async updateLogisticsReminder() {
        if (!this.logistics_prompt.logistics_value.trim()) {
          this.$message.warning("提示信息不能为空");
          return;
        }
        this.loading = true;
        try {
          const { data } = await updateLogisticsReminder({
            id: this.logistics_id,
            reminder: this.logistics_prompt.logistics_value,
          });
          this.$message.success("设置成功");
          await this.closeDialog("form");
          await this.getData();
          this.loading = false;
        } catch {
          this.loading = false;
        }
      },
      logisticsFlagTrue(id) {
        this.logisticsFlag = true;
        this.logistics_id = id;
      },
    },
  };
</script>

<style scoped>
  .delivery-item {
    width: 97%;
    margin: 0 auto 20px;
    border: 1px solid #eeeeee;
    border-radius: 4px;
  }
  .di-top {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #eeeeee;
  }
  .desc-div {
    font-size: 12px;
    padding: 10px 20px;
    line-height: 32px;
    color: #666666;
  }
  .default-tag {
    font-size: 12px;
    line-height: 16px;
    font-weight: 300;
    padding: 0 5px;
    color: #67c23a;
    border: 1px solid #67c23a;
    display: inline-block;
    border-radius: 2px;
    margin-left: 10px;
  }
  .DeliverySet {
    background-color: #ffffff;
    padding: 20px 0;
  }
</style>
