<template>
  <div class="dec-link-setting">
    <div class="dec-flex-list side" style="margin: 0">
      <div class="sub-title">跳转链接管理</div>
      <div>
        <a-button type="primary" icon="plus" @click="addItem">新增</a-button>
        <a-button style="margin-left: 10px" @click="getTableData">
          刷新
        </a-button>
      </div>
    </div>
    <a-spin :spinning="loading">
      <a-table
        :columns="columns"
        :data-source="showList"
        :pagination="false"
        :scroll="{ x: 1200 }"
        rowKey="id"
      >
        <span slot="customTitle">
          <a-icon type="smile-o" style="margin-right: 10px" />链接名
        </span>
        <span slot="linkType" slot-scope="isOpen">
          <a-tag :color="linkType[isOpen].color">{{
            linkType[isOpen].name
          }}</a-tag>
        </span>
        <span slot="operation" slot-scope="id, record">
          <a-icon class="ic-edit" type="edit" @click="editItem(record)" />
          <!-- <a-icon style="margin-left:10px;" class="ic-edit" type="delete" @click="delItem(record)" /> -->
        </span>
        <span slot="urlTypeName" slot-scope="urlType, record">
          {{ dictOptionsMap[urlType] || urlType }}
        </span>
      </a-table>
      <div class="pager">
        <a-pagination
          :total="total"
          :pageSize="pageSize"
          :current="current"
          :showSizeChanger="false"
          @change="pageChange"
          show-size-changer
          show-quick-jumper
        />
      </div>
    </a-spin>
    <a-drawer
      title="跳转链接修改"
      placement="right"
      :closable="false"
      :visible="visible"
      @close="visible = false"
      :width="600"
    >
      <div class="dec-link-drawer">
        <!-- 链接名称 排序号  链接类型  类型标识  链接地址 链接参数API 链接参数键值对 -->
        <div style="color: red">*链接地址指对应的小程序中的路径地址</div>
        <div class="dec-flex-list middle">
          <span class="d-left">链接名：</span>
          <div class="d-right">
            <a-input placeholder="请输入链接名" v-model="editData.urlContent" />
          </div>
        </div>
        <div class="dec-flex-list middle">
          <span class="d-left">排序号：</span>
          <div class="d-right">
            <a-input-number
              id="inputNumber"
              v-model="editData.sortNum"
              :min="1"
              :max="999"
            />
          </div>
        </div>
        <div class="dec-flex-list">
          <span class="d-left">链接类型：</span>
          <div class="d-right">
            <a-radio-group name="radioGroup" v-model="editData.isOpen">
              <a-radio
                v-for="(item, i) in linkType"
                :key="item.key"
                :value="i"
                >{{ item.name }}</a-radio
              >
            </a-radio-group>
          </div>
        </div>
        <div class="dec-flex-list middle">
          <span class="d-left">类型标识：</span>
          <div class="d-right">
            <j-dict-select-tag
              style="width: 100%"
              placeholder="请选择类型标识"
              v-model="editData.urlType"
              dictCode="design_page_url_type"
            />
            <!-- <a-input placeholder="请输入类型标识" v-model="editData.urlType" /> -->
          </div>
        </div>
        <div class="dec-flex-list middle">
          <span class="d-left">链接标识：</span>
          <div class="d-right">
            <a-input placeholder="请输入链接标识" v-model="editData.urlVal" />
          </div>
        </div>
        <div class="dec-flex-list middle">
          <span class="d-left">链接地址：</span>
          <div class="d-right">
            <a-textarea
              v-model="editData.urlPattern"
              placeholder="请输入链接地址"
              :auto-size="{ minRows: 2, maxRows: 4 }"
            />
          </div>
        </div>
        <template v-if="editData.isOpen == '1'">
          <div class="dec-flex-list middle">
            <span class="d-left">链接参数API：</span>
            <div class="d-right">
              <a-input
                placeholder="请输入获取参数的API"
                v-model="editData.openUrl"
              />
            </div>
          </div>
          <div class="dec-flex-list middle">
            <span class="d-left">链接参数键值对：</span>
            <div class="d-right">
              <a-input
                placeholder="请输入参数键值对"
                v-model="editData.caseName"
              />
            </div>
          </div>
        </template>
        <div class="action-btn">
          <a-button @click="visible = false">取消</a-button>
          <a-button type="primary" @click="editHander">确定</a-button>
        </div>
        <div class="dec-flex-list param-tip" v-if="editData.isOpen == '1'">
          *带参链接需要通过接口【链接参数API】获取小程序的路径参数。
          <br />
          *键值对可配置列表【选参table】的显示字段，并配置要保存的路径参数键值对。
          <br />
          *功能性键值对说明如下：
          <br />
          -
          【$id:id|shopId】其中的shopId为小程序链接参数【key=p123】中的key,p123则为列表接口返回的id字段值，如无则会默认为键id，值为列表接口返回的id值。
          <br />
          -
          【$params:pid&shopId&productId】pid,shopId,productId将会保存为小程序中的额外参数key,值为列表接口对应的字段值。
          <br />
          -
          【$name:pageName】列表接口返回的pageName字段值会作为装修链接的名称标示，如：微页面-1月海报，不涉及小程序的跳转。
          <br />
          - 【$img:img|name】为图片名称复合字段，仅用配置显示图片，
          列表接口返回的img字段将会作为图片路径字段，旁边的name作为图片旁的名称。
        </div>
      </div>
    </a-drawer>
  </div>
</template>
<script>
// import { ajaxGetDictItems } from '@/api/api'
const columns = [
  {
    title: "No",
    dataIndex: "sortNum",
    fixed: "left",
    width: 55,
  },
  {
    dataIndex: "id",
    title: "操作",
    scopedSlots: { customRender: "operation" },
    fixed: "left",
    width: 65,
  },
  {
    title: "链接类别",
    dataIndex: "urlType",
    scopedSlots: { customRender: "urlTypeName" },
    fixed: "left",
    width: 120,
  },
  {
    title: "链接类型",
    dataIndex: "isOpen",
    scopedSlots: { customRender: "linkType" },
    fixed: "left",
    width: 95,
  },
  {
    dataIndex: "urlContent",
    title: "链接名",
    scopedSlots: { customRender: "urlContent" },
    fixed: "left",
    width: 120,
  },
  {
    title: "链接标识",
    dataIndex: "urlVal",
    width: 120,
  },
  {
    title: "链接地址",
    dataIndex: "urlPattern",
  },
  {
    title: "链接参数API",
    dataIndex: "openUrl",
  },
  {
    title: "链接参数键值对",
    dataIndex: "caseName",
  },
];

export default {
  name: "shopLink",
  props: ["config"],
  data() {
    return {
      visible: false,
      loading: false,
      editData: {},
      showList: [],
      columns,
      pageSize: 10,
      total: 0,
      current: 1,
      decAxios: null,
      dictOptionsMap: {},
      linkType: [
        {
          key: "0",
          color: "green",
          name: "完整链接",
        },
        {
          key: "1",
          color: "cyan",
          name: "带参链接",
        },
        {
          key: "2",
          color: "orange",
          name: "DIY链接",
        },
        // {
        //   key: '3',
        //   color: 'red',
        //   name: '过滤链接'
        // }
      ],
    };
  },
  created() {
    this.decAxios = this.config.decAxios;
    // ajaxGetDictItems('design_page_url_type', null).then((res) => {
    //   if (res.success) {
    //     let map = {};
    //     (res.result || []).forEach(item => {
    //       map[item.value] = item.title
    //     })
    //     this.dictOptionsMap = map
    //   }
    //   this.getTableData()
    // }).catch(e=>{
    //   this.getTableData()
    // });
  },
  methods: {
    getTableData() {
      this.loading = true;
      let params = {
        pageSize: this.pageSize,
        pageNo: this.current,
      };
      this.decAxios.getLinkManageData(params).then((res) => {
        this.loading = false;
        if (res.code == "200") {
          this.showList = res.result.records;
          this.total = res.result.total;
        } else {
          this.showList = [];
          this.total = 0;
        }
      });
    },
    addItem() {
      const row = {
        id: "",
        urlContent: "",
        sortNum: "",
        isOpen: "",
        urlType: "",
        urlVal: "",
        urlPattern: "",
        openUrl: "",
        caseName: "",
        delFlag: "0",
      };
      this.visible = true;
      this.editData = JSON.parse(JSON.stringify(row));
    },
    editItem(row) {
      this.visible = true;
      this.editData = JSON.parse(JSON.stringify(row));
    },
    delItem(row) {
      const item = Object.assign({}, row, { delFlag: "1" });
      this.decAxios.saveLinkData(item).then((res) => {
        if (res.code == "200") {
          this.$message.success("删除成功");
          this.getTableData();
        }
      });
    },
    pageChange(obj) {
      obj && (this.current = obj) && this.getTableData();
    },
    editHander() {
      this.decAxios.saveLinkData(this.editData).then((res) => {
        if (res.code == "200") {
          this.$message.success("保存成功");
          this.visible = false;
          this.getTableData();
        }
      });
    },
  },
};
</script>
