<template>
  <Container>
    <div slot="left">
      <el-button
        v-if="$accessCheck($Access.DeliverysetData)"
        size="small"
        type="primary"
        @click="
          $router.push(
            '/SystemSettings/jiaoyiset/AddDeliveryTem?deiId=' + delivery_id
          )
        "
      >
        新建模版
      </el-button>
    </div>
    <div v-if="template_list.length === 0" style="text-align: center">
      暂无数据
    </div>
    <ul>
      <li v-for="(item, index) in template_list" :key="index" class="tem-item">
        <div class="ti-top clearfix">
          <div class="float_left">
            模板名称:
            <span style="font-weight: 600; margin-right: 20px">
              {{ item.name }}
            </span>
            <span style="color: #999999">
              使用中的商品：0个 最后编辑时间：{{
                $_common.formatDate(item.createTime)
              }}
            </span>
          </div>
          <div class="float_right">
            <el-tag
              v-if="parseInt(item.isDefault) === 5"
              size="small"
              type="success"
            >
              默认
            </el-tag>
            <el-button
              v-else
              type="text"
              size="small"
              @click="setDefaultRule(item.id)"
            >
              设为默认
            </el-button>
            <el-button
              v-if="$accessCheck($Access.DeliverysetData)"
              type="text"
              size="small"
              @click="
                $router.push(
                  '/SystemSettings/jiaoyiset/EditDeliveryTem?deiId=' +
                    delivery_id +
                    '&id=' +
                    item.id
                )
              "
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="
                $router.push(
                  '/SystemSettings/jiaoyiset/AddDeliveryTem?deiId=' +
                    delivery_id +
                    '&id=' +
                    item.id
                )
              "
            >
              复制
            </el-button>
            <el-button
              v-if="$accessCheck($Access.DeliverydelDeliveryRule)"
              type="text"
              size="small"
              @click="delDeliveryRule(item.id)"
            >
              删除
            </el-button>
          </div>
        </div>
        <el-table :data="item.areas">
          <el-table-column prop="type" label="计费方式" min-width="80">
            <template>
              <span :style="{ color: item.type === 4 ? '#409EFF' : '#67C23A' }">
                {{ item.type === 4 ? "按件数" : "按重量" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="text"
            label="配送范围"
            min-width="400"
          ></el-table-column>
          <el-table-column
            prop="first_num"
            :label="`${item.type === 4 ? '首件(个)' : '首重(g)'}`"
            min-width="80"
          ></el-table-column>
          <el-table-column prop="first_price" label="运费" min-width="80">
            <template slot-scope="scope">
              {{ $_common.formattedNumber(scope.row.first_price) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="second_num"
            :label="`${item.type === 4 ? '续件(个)' : '续重(g)'}`"
            min-width="80"
          ></el-table-column>

          <el-table-column prop="second_price" label="运费" min-width="80">
            <template slot-scope="scope">
              {{ $_common.formattedNumber(scope.row.second_price) }}
            </template>
          </el-table-column>
        </el-table>
        <div v-if="item.not_dispatch_areas.text" class="not_dispatch_areas">
          <span style="color: #999999; font-size: 12px">不配送范围：</span>
          <span>{{ item.not_dispatch_areas.text }}</span>
        </div>
      </li>
    </ul>
  </Container>
</template>

<script>
  import { DeliveryInfo, delDeliveryRule, setDefaultRule } from "@/api/System";
  export default {
    name: "DeliveryTemplate",
    data() {
      return {
        delivery_id: 0,
        template_list: [],
      };
    },
    created() {
      this.delivery_id = this.$route.params.deiId;
      this.DeliveryInfo();
    },
    activated() {
      if (this.$_isInit()) return;
      this.DeliveryInfo();
    },
    methods: {
      // 获取运费模版
      async DeliveryInfo() {
        const { data } = await DeliveryInfo(this.delivery_id);

        this.template_list = data.setData.map((item) => {
          item.areas.unshift({
            ...item.uniform,
            text: "全国统一运费",
          });
          return item;
        });
      },
      // 删除运费模版
      delDeliveryRule(id) {
        this.$confirm("确定要删除该运费模版吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await delDeliveryRule(id);

          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.DeliveryInfo();
        });
      },
      async setDefaultRule(id) {
        const data = await setDefaultRule(id);

        this.$message({
          type: "success",
          message: "操作成功!",
        });
        this.DeliveryInfo();
      },
    },
  };
</script>

<style scoped>
  .tem-item {
    margin-top: 20px;
    border: 1px solid #eeeeee;
  }

  .ti-top {
    font-size: 12px;
    line-height: 34px;
    padding: 10px 20px;
    background-color: #f7f7f7;
  }
  .not_dispatch_areas {
    font-size: 13px;
    line-height: 30px;
    background-color: #f7f7f7;
    padding: 10px;
    color: #000000;
  }
</style>
