<template>
  <div class="app-container">
    <div>
      <h4>设置同城运费</h4>
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="120px"
      >
        <el-form-item label="小于商品金额：" prop="spuName">
          <el-input
            v-model="queryParams.referencePrice"
            placeholder="请输入"
            clearable
            style="width: 180px"
          >
            <span slot="suffix">元</span>
          </el-input>
          ,运费
          <el-input
            v-model="queryParams.freight"
            placeholder="请输入"
            clearable
            style="width: 180px"
          >
            <span slot="suffix">元</span>
          </el-input>
          <br />
          <div style="margin-top: 10px">
            <span>当用户商品金额大于所设置金额时，则包邮</span>
          </div>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col style="text-align: center">
          <el-button size="mini" type="primary" @click="submitFree"
            >保存</el-button
          ></el-col
        >
      </el-row>
    </div>
    <div style="height: 20px; background: #f4f4f4; margin-top: 20px"></div>
    <div>
      <h4>异地运费</h4>
      <el-tabs v-model="expressType" @tab-click="getFreightTemplate">
        <el-tab-pane label="水果特惠" name="0"></el-tab-pane>
        <el-tab-pane label="生鲜特快" name="1"></el-tab-pane>
        <el-tab-pane label="京东标快" name="2"></el-tab-pane>
      </el-tabs>
      <el-row>
        <el-col
          :span="24"
          v-for="(item, index) in tableData"
          :key="index"
          style="margin-bottom: 20px"
        >
          <div
            style="
              padding: 10px 10px;
              background: #0ea0df2e;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
            "
          >
            <span style="font-size: 14px"> 发货地:{{ item.sendCityName }}</span>
          </div>
          <el-table :data="item.detailList" style="width: 100%" border>
            <el-table-column prop="receiveCityJson" label="送达地区" width="800">
              <template slot-scope="scope">
                <span v-if="scope.row.isDefault == 0">
                  {{ scope.row.receiveCityJson }}
                </span>
                <span
                  v-else
                  v-for="(item, index) in scope.row.receiveCityJson
                    ? JSON.parse(scope.row.receiveCityJson)
                    : []"
                  :key="index"
                >
                  <div>
                    {{ item.provinceName }}
                    (<span v-for="(item, index) in item.cityList" :key="index">
                      {{ item.cityName }}
                    </span>
                    )
                  </div>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" width="180">
              <template slot="header" slot-scope="scope">
                <div>首重价格(元)</div>
                <div>1kg</div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.firstWeightPrice }}
              </template>
            </el-table-column>
            <el-table-column align="center">
              <template slot="header" slot-scope="scope">
                <div>续重价格①(元/kg)</div>
                {{ item.secondStartWeight }}-{{ item.secondEndWeight }}kg
              </template>
              <template slot-scope="scope">
                {{ scope.row.secondWeightPrice }}
              </template>
            </el-table-column>
            <el-table-column align="center">
              <template slot="header" slot-scope="scope">
                <div>续重价格②(元/kg)</div>
                <div>{{ item.secondEndWeight }}kg以上</div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.lastWeightPrice }}
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row v-if="tableData.length < 1">
        <el-col :sm="24" :lg="24">
          <el-result icon="info" title="信息提示" subTitle="暂无异地运费规则">
          </el-result>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  getFreightTemplate,
  savaLogisticsTemplate,
  getLogisticsTemplateInfo,
} from "@/api/manage/product";
import { getStoreInfo } from "@/api/common/index";
export default {
  data() {
    return {
      queryParams: {
        shopId: "",
        freight: "",
        referencePrice: "",
      },
      tableData: [],
      shopInfo: {},
      expressType: 0,
    };
  },
  created() {
    this.getInfo();
  },
  mounted() {},
  methods: {
    getFree() {
      getLogisticsTemplateInfo(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.queryParams = res.data;
          //   this.queryParams.freight = res.data[0].freight;
          //   this.queryParams.referencePrice = res.data[0].referencePrice;
        }
      });
    },
    submitFree() {
      this.queryParams.shopId = this.shopInfo.id;
      savaLogisticsTemplate(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.$message.success("保存成功");
          this.getFree();
        }
      });
    },
    getInfo() {
      getStoreInfo().then((res) => {
        if (res.code == 200) {
          this.shopInfo = res.data;
          this.getFreightTemplate();
          this.getFree();
        }
      });
    },
    getFreightTemplate() {
      let cityCode = JSON.parse(this.shopInfo.storeCityCode);
      getFreightTemplate({
        sendCityCode: cityCode[1],
        pageNo: 1,
        pageSize: 999,
        expressType: this.expressType,
      }).then((res) => {
        if (res.code == 200) {
          res.data.records.forEach((e) => {
            e.detailList.forEach((a, index) => {
              e.secondStartWeight = a.secondStartWeight;
              e.secondEndWeight = a.secondEndWeight;
            });
          });
          this.tableData = res.data.records;
        }
      });
    },
  },
};
</script>

<style></style>
