<template>
  <div>
    <!-- 压缩链接 -->
    <el-dialog :visible.sync="reduceLink.show" title="压缩链接" width="798px" @closed="reduceLink.link = ''">
      <el-form label-width="100px">
        <el-form-item label="请输入网址：">
          <dm-input class="reduce-link-input" type="textarea" :rows="4" v-model="reduceLink.link"></dm-input>
          <p class="reduce-link-tip">如果链接只能在微信环境下打开，则浏览器会提示需要在微信下打开此链接，但是无法直接跳转到微信</p>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="reduceLink.show = false">取消</el-button>
        <el-button type="primary" @click="onReduceLink">生成链接</el-button>
      </template>
    </el-dialog>
    <!-- 插入小程序链接 -->
    <el-dialog :visible.sync="transferLink.show" title="插入小程序链接" width="878px" @closed="onTransferLinkClose">
      <el-form label-width="110px">
        <el-form-item label="链接类型：">
          <el-button @click="selectLink.show = true">{{ selectLink.linkData.name || '设置小程序链接' }}</el-button>
        </el-form-item>
        <el-form-item label="链接有效时长：">
          <el-select v-model="transferLink.type" style="width: 143px;vertical-align: top">
            <!-- 0-短期有效，1-长期有效，2-永久有效 -->
            <el-option label="短期有效" value="0"></el-option>
            <el-option label="长期有效" value="1"></el-option>
            <el-option label="永久有效" value="2"></el-option>
          </el-select>
          <template v-if="transferLink.type != 2">
            <el-input-number v-model="transferLink.dayNum" :min="getMin" :max="getMax" controls-position="right" style="width: 90px"></el-input-number>
            <span class="transfer-link-uint">天</span>
            <span class="transfer-link-tip">{{ transferLink.type == 0 ? `不能大于${getMax}天` : `大于${getMin - 1}天且小于等于${getMax}天` }}</span>
          </template>
          <p class="transfer-link-tip">长期有效链接（>31天且≤365天，包含永久有效链接）每个小程序只支持十万，建议商品详情/礼品详情等非永久页面生成短期有效链接（≤31天）。</p>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="transferLink.show = false">取消</el-button>
        <el-button type="primary" @click="onTransferLink">生成链接</el-button>
      </template>
    </el-dialog>
    <el-dialog :visible.sync="insertLink.show" title="链接生成">
      <div class="insert-link">
        <p class="link-text">{{ insertLink.link }}</p>
        <el-button type="text" v-clipboard:text="insertLink.link">复制</el-button>
      </div>
      <template slot="footer">
        <el-button @click="insertLink.show = false">上一步</el-button>
        <el-button type="primary" @click="onInsert">插入链接</el-button>
      </template>
    </el-dialog>
    <linktools :linkVisible.sync="selectLink.show" :linkData="selectLink.linkData" :remove="[5, 35]" :can-save="true" @linkSelect="onSaveLink" /><!-- 链接小工具 - 转赠 -->
    <el-dialog title="选择短信模板" :visible.sync="smsTemplate.show" width="800px" @close="selectedData = null">
      <div class="pb22">
        <el-input clearable v-model="listParams.search" class="w200" placeholder="请输入短信名称" @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
        <span class="pl10 fz13 gray" style="vertical-align:middle"><i class="el-icon-info pr10"></i>短信运营商限制：为避免骚扰用户，营销短信只允许在8点到22点发送</span>
      </div>
      <el-table tooltipEffect="light" :data="smsTempList" height="400" style="width: 100%" row-class-name="cursor-pointer" v-loading="loading" @row-click="rowClick">
        <el-table-column :show-overflow-tooltip="false" :width="60" align="center" prop="smsTemplateId">
          <template slot-scope="scope">
            <div class="label-hidden">
              <el-radio v-model="selectedData" :label="scope.row" class="pr10"></el-radio>
            </div>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="false" :width="150" :min-width="200" align="left" prop="title" label="更新日期">
          <template slot-scope="scope">
            <span>{{ formatDateTimeByType(scope.row.updateTime || scope.row.createTime, 'yyyy-MM-dd-HH-mm-ss', true).y }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="false" :width="150" :min-width="200" align="left" prop="title" label="模板名称"></el-table-column>
        <el-table-column :show-overflow-tooltip="false" :width="150" :min-width="200" align="left" prop="content" label="模板类型">
          <template slot-scope="scope">
            <div>{{ scope.row.type === 0 ? '普通短信' : scope.row.type === 1 ? '营销短信' : '验证码' }}</div>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="false" :min-width="200" align="left" prop="content" label="模板内容">
          <template slot-scope="scope">
            <div class="ellipsis-l3">{{ scope.row.content }}</div>
          </template>
        </el-table-column>
      </el-table>
      <dm-pagination v-show="smsTempList.length" class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="prev, pager, next" :total="total"></dm-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="smsTemplate.show = false">关 闭</el-button>
        <el-button type="primary" @click="addItem">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { compressLink, getTransferLink } from '@/service/api/commonApi.js';
import Linktools from '@/components/linktools-fulls/index';
import { LoadTempList } from '../assets/api.js';
import { formatDateTimeByType } from '@/utils/index.js';
export default {
  name: 'qywx-dialog',
  components: { Linktools },
  data() {
    return {
      // 压缩链接
      reduceLink: {
        show: false,
        link: ''
      },
      // 插入小程序链接相关
      insertLink: {
        show: false,
        link: ''
      },
      // 转换链接
      transferLink: {
        show: false,
        type: '0', // 0-短期有效，1-长期有效，2-永久有效
        dayNum: '', // 天数
        pageId: '' // pageId
      },
      // 链接小工具选择链接
      selectLink: {
        show: false,
        linkData: {}
      },
      smsTemplate: {
        show: false
      },
      listParams: {
        search: '',
        currentPage: 1,
        pageSize: 20
      },
      total: 0,
      smsTempList: [],
      selectedData: null,
      loading: false,
      formatDateTimeByType
    };
  },
  methods: {
    // 生成短连接
    onReduceLink() {
      if (!this.reduceLink.link) {
        return this.$tips({ type: 'error', message: '请输入网址' });
      }
      compressLink({ link: this.reduceLink.link }, false, false, 'post').then(res => {
        this.insertLink.show = true;
        this.insertLink.link = res.result;
      });
    },
    // 保存链接小工具返回的链接数据
    onSaveLink(linkData) {
      this.selectLink.linkData = linkData;
    },
    onTransferLinkClose() {
      this.selectLink.linkData = {};
      this.transferLink.type = '0';
      this.transferLink.dayNum = 1;
    },
    // 将小程序链接转换成中转页链接
    onTransferLink() {
      if (!this.selectLink.linkData.id) {
        return this.$tips({ type: 'error', message: '请选择小程序链接' });
      }
      const { type, dayNum } = this.transferLink;
      const requestData = { type, dayNum, pageLink: JSON.stringify(this.selectLink.linkData) };
      getTransferLink(requestData, false, false, 'post').then(res => {
        this.insertLink.link = res.result;
        this.insertLink.show = true;
      });
    },
    handleSizeChange(val) {
      this.listParams.pageSize = val;
      this.LoadTempList();
    },
    handleCurrentChange(val) {
      this.listParams.currentPage = val;
      this.LoadTempList();
    },
    LoadTempList() {
      this.loading = true;
      LoadTempList(this.listParams).then(res => {
        if (res.errorCode === 0) {
          this.smsTempList = (res.result && res.result.result) || [];
          this.total = res.result && res.result.totalCount;
        }
        this.loading = false;
      });
    },
    rowClick(row) {
      this.selectedData = row;
    },
    addItem() {
      if (!this.selectedData) {
        this.$message({ type: 'warning', message: '未选择短信' });
        return;
      }
      this.$emit('sendItem', { type: 1, value: this.selectedData });
      this.smsTemplate.show = false;
    },
    refresh() {
      this.listParams.currentPage = 1;
      this.LoadTempList();
    },
    onInsert() {
      this.insertLink.show = false;
      this.reduceLink.show = false;
      this.transferLink.show = false;
      this.$emit('sendItem', { type: 2, value: this.insertLink.link });
    }
  },
  computed: {
    getMin() {
      if (this.transferLink.type == 0) {
        // eslint-disable-next-line
        this.transferLink.dayNum = 1;
      } else {
        // eslint-disable-next-line
        this.transferLink.dayNum = 32;
      }
      return this.transferLink.type == 0 ? 1 : 32;
    },
    getMax() {
      let max = 31;
      if (this.transferLink.type == 0) {
        max = 31;
      } else if (this.transferLink.type == 1) {
        max = 365;
      } else {
        max = Infinity;
      }
      return max;
    }
  },
  watch: {
    'smsTemplate.show'(val) {
      if (val) {
        this.listParams = {
          search: '',
          currentPage: 1,
          pageSize: 20
        };
        this.total = 0;
        this.LoadTempList();
      }
    }
  }
};
</script>

<style lang="scss">
.reduce-link-input {
  /deep/ .dm-input__counter {
    display: none;
  }
}
.reduce-link-tip {
  margin-top: 5px;
  text-align: right;
  font-size: 12px;
  color: #606266;
  line-height: 17px;
}
.transfer-link-uint {
  margin: 0 15px 0 8px;
  font-size: 14px;
  color: #303133;
  line-height: 20px;
}
.transfer-link-tip {
  font-size: 12px;
  color: #909399;
  line-height: 17px;
}
.insert-link {
  padding: 18px 12px;
  background: #f3f6f9;
  .link-text {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    max-width: 80%;
    font-size: 14px;
    font-weight: 400;
    color: #606266;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
