<style>
  .msgmanage .order_List {
    width: 300px;
    height: 180px;
    box-shadow: #dee5ec 0px 0px 5px;
    border-radius: 5px;
    padding: 5px 20px;
    background-color: #fff;
    position: relative;
  }

  .msgmanage .order_top {
    padding: 5px 0 10px 0;
    display: flex;
    align-items: center;
    color: #111111;
    border-bottom: 1px solid #E2E2E2;
    justify-content: space-between;
    align-items: center;
  }

  .msgmanage .order_info {
    color: #999999;
    margin-top: 15px;
  }

  .msgmanage .sendStatus {
    font-weight: bold;
    margin-left: 10px;
  }

  .msgmanage .lineMsg {
    display: inline-block;
    width: 100px;
  }

  .msgmanage .lineMsg::after {
    content: "";
    display: block;
    background: #000;
    width: 100%;
    height: 1px;
  }

  .msgmanage .order_Success {
    position: absolute;
    bottom: 20px;
    align-items: center;
    display: flex;
    width: 90%;
    justify-content: space-between;
  }

  .msgmanage .SuccessInput {
    border: none;
    width: 150px;
    outline: none;
    border-bottom: 1px solid #d1d1d1;
  }

  .msgmanage .drawerTop {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    background-color: #F0F5FB;
    padding: 5px 10px;
    align-items: center;
  }

  .msgmanage .drawer_Span {
    font-weight: bold;
    font-size: 14px;
    margin-left: 5px;
  }

  .Sysuser_Date .el-range-editor .el-range-input {
    background-color: transparent;
  }

  .Sysuser_Date .el-range-editor.el-input__inner {
    background-color: transparent;
  }

</style>
<template>
  <div class="page-body msgmanage">
    <q-tabs style="margin-bottom:20px;" v-model="tabCheck" @input="tabChange()" narrow-indicator dense align="left"
      class="text-primary">
      <q-tab :ripple="false" name="first" label="短信流水" />
      <q-tab :ripple="false" name="second" label="短信配置" />
      <q-tab :ripple="false" name="third" label="短信设置" />
    </q-tabs>
    <template v-if="tabCheck=='first'">
      <div class="page-search row items-center">
        <div class="col row wrap q-mr-lg q-col-gutter-md">
          <div class="col-3">
            <q-input clearable @change="getList" standout="bg-primary text-white" class="col-6 q-pr-lg q-pr-lg"
              v-model="waterMsg.ReceiverName" label="收信人/电话" />
          </div>
          <div class="col-3">
            <q-input clearable @change="getList" standout="bg-primary text-white" class="col-6 q-pr-lg q-pr-lg"
              v-model="waterMsg.SendContent" label="内容" />
          </div>
          <div class="col-3 Sysuser_Date">
            <q-field filled class="col-6 q-pr-lg q-pb-lg">
                          <template v-slot:control>
                              
                <el-date-picker v-model="dateListOne" @change="getList()" value-format="yyyy-MM-dd" type="daterange"
                   style="border:none;"                 range-separator="至"  start-placeholder="开始日期"
                   end-placeholder="结束日期">
                                </el-date-picker>
                            </template>
                        </q-field>
          </div>
          <div class="col-3">
            <q-select @input="getList" standout="bg-primary text-white" class="col-6 q-pr-lg q-pr-lg"
              v-model="waterMsg.SendStatus" :options="ShowOpts" emit-value map-options label="发送状态" />
          </div>
        </div>
      </div>
      <div class="page-content">
        <q-table :pagination="waterMsg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
          separator="none" title="" :data="data" :columns="columns" row-key="name">
          <template v-slot:body-cell-SendStatus="props">
            <q-td :props="props" style="display:flex;align-items:center;">
              <template v-if="props.row.SendStatus==2">
                <img src="../../assets/images/myimg/success.png" alt="" />
                <span class="sendStatus" style="color:#02C499;">发送成功</span>
              </template>
              <template v-if="props.row.SendStatus==1">
                <img src="../../assets/images/myimg/failed.png" alt="" />
                <span class="sendStatus" style="color:#F72E52;">发送失败</span>
              </template>
            </q-td>
          </template>
          <template v-slot:bottom>
            <q-pagination class="full-width justify-end" v-model="waterMsg.pageIndex" color="primary" :max="pageCount"
              :input="true" @input="changePage" />
          </template>
        </q-table>
      </div>
    </template>
    <template v-if="tabCheck=='second'">
      <div class="page-search row items-center">
        <div class="col row wrap q-mr-lg q-col-gutter-md">
          <div class="col-3">
            <q-select @input="getConfigList" standout="bg-primary text-white" class="col-6 q-pr-lg q-pr-lg"
              v-model="ConfigMsg.StoreType" :options="statusData" option-value="Id" option-label="Name" emit-value
              map-options label="类型" />
          </div>
        </div>
        <div class="page-option">
          <q-btn color="accent" class="q-mr-md" size="sm" icon="add" label="新增配置" @click="addConfig(null)" />
        </div>
      </div>
      <div class="page-content">
        <q-table :pagination="ConfigMsg" :loading="loading2" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
          separator="none" title="" :data="configData" :columns="columns2" row-key="name">
          <template v-slot:body-cell-StoreType="props">
            <q-td :props="props">
              <template v-if="props.row.StoreType==1">
                <img src="../../assets/images/myimg/tencent.png" alt="" />
                <span class="sendStatus" style="color:#02C499;">腾讯云</span>
              </template>
              <template v-if="props.row.StoreType==2">
                <img src="../../assets/images/myimg/ali.png" alt="" />
                <span class="sendStatus" style="color:#F72E52;">阿里云</span>
              </template>
            </q-td>
          </template>
          <template v-slot:body-cell-MsgBase="props">
            <q-td :props="props">
              <div>地区：{{props.row.MsgBase.RegionId}}</div>
              <div>域名：{{props.row.MsgBase.Domain}}</div>
              <div>AccessKeyId：{{props.row.MsgBase.AccessKeyId}}</div>
              <div>AccessSecret：{{props.row.MsgBase.AccessSecret}}</div>
            </q-td>
          </template>
          <template v-slot:body-cell-optioned="props">
            <q-td :props="props">
              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
                @click="EditConfig(props.row)" />
            </q-td>
          </template>
          <template v-slot:bottom>
            <q-pagination class="full-width justify-end" v-model="ConfigMsg.PageIndex" color="primary"
              :max="pageCountConfig" :input="true" @input="changePage2" />
          </template>
        </q-table>
      </div>
    </template>
    <template v-if="tabCheck=='third'">
      <div class="page-search row items-center">
        <div class="col row wrap q-mr-lg q-col-gutter-md">
          <div class="col-3">
            <q-select @input="getSetingMsg" class="col-6 q-pr-lg q-pr-lg" standout="bg-primary text-white"
              v-model="setMsg.StoreType" :options="statusData" option-value="Id" option-label="Name" emit-value
              map-options label="类型" />
          </div>
        </div>
        <div class="page-option">
          <q-btn color="accent" class="q-mr-md" icon="add" label="新增设置" @click="addSetcfig()" />
        </div>
      </div>
      <div style="display:flex;">
        <div class="order_List" v-for="item in setUpData" style="margin-right:15px;">
          <div class="order_top">
            <div style="display:flex;align-items:center;">
              <img v-if="item.BaseTemplateType==1" src="../../assets/images/myimg/gou.png" />
              <img v-if="item.BaseTemplateType==2" style="width:30px;height:30px;"
                src="../../assets/images/myimg/failed.png" />
              <span style="margin-left:10px;">{{item.BaseTemplateTypeStr}}</span>
            </div>
            <div>
              <i style="cursor:pointer;" @click="getMsgInfo(item)" class="iconfont icon-xiugai"></i>
            </div>
          </div>
          <div class="order_info">
            <template v-if="item.StoreType==1">
              <img src="../../assets/images/myimg/tencent.png" alt="" />
              <span class="sendStatus" style="color:#02C499;">腾讯云</span>
            </template>
            <template v-if="item.StoreType==2">
              <img src="../../assets/images/myimg/ali.png" alt="" />
              <span class="sendStatus" style="color:#02C499;">阿里云</span>
            </template>
          </div>
          <div style="margin-top:10px;">
            模板id：{{item.TemplateId}}
          </div>
          <div class="order_Success">
            <div>
              签名：{{item.Sign}}
            </div>
            <div>
              <q-toggle size="md" color="primary" :disable="true" v-model="item.TemplateStaus" :false-value="1"
                :true-value="0" />
            </div>
          </div>
        </div>
      </div>
      <q-pagination class="full-width justify-end" v-model="setMsg.PageIndex" color="primary" :max="setDataCount"
        :input="true" @input="changePage3" />
    </template>

    <q-dialog v-model="persistent1" maximized full-height seamless position="right" @hide="closeperForm">
      <q-card style="margin-top:61px;width:600px" class="no-border-radius classinfo_Dialog">
        <div class="drawerTop">
          <div style="display:flex;align-items:center;margin:20px 0 0 20px;">
            <span class="drawer_Span">短信账号配置</span>
          </div>
        </div>
        <div style="padding:20px 15px;">
          <q-radio v-model="configEditMsg.StoreType" style="margin-right:20px;" v-for="(item,index) in statusData"
            v-if="item.Id>0" :val="item.Id" :label="item.Name" :key="index" />
        </div>
        <div class="col-12" style="margin:0 24px;">
          <q-input filled stack-label maxlength="100" :dense="false" v-model="configEditMsg.MsgBase.RegionId"
            class="col-12" label="地区" :rules="[val => !!val || '请填写地区']" />
        </div>
        <div class="col-12" style="margin:20px 24px;">
          <q-input filled stack-label maxlength="100" :dense="false" v-model="configEditMsg.MsgBase.Domain"
            class="col-12" label="域名" :rules="[val => !!val || '请填写域名']" />
        </div>
        <div filled class="col-12" style="margin:20px 24px;">
          <q-input filled stack-label maxlength="100" :dense="false" v-model="configEditMsg.MsgBase.AccessKeyId"
            class="col-12" label="秘钥Key" :rules="[val => !!val || '请填写秘钥Key']" />
        </div>
        <div filled class="col-12" style="margin:0 24px;">
          <q-input filled stack-label maxlength="100" :dense="false" v-model="configEditMsg.MsgBase.AccessSecret"
            class="col-12" label="秘钥Secret" :rules="[val => !!val || '请填写秘钥Secret']" />
        </div>
        <div style="margin:30px 10px 0 0;text-align:right;">
          <q-btn color="accent" class="q-mr-md" icon="add" label="保存" @click="saveConfig()" />
        </div>
      </q-card>
      <div class="dialog-out-close" @click="closeperForm"
        style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
        <q-icon name="iconfont icon-jujue1" size="26px" />
      </div>
    </q-dialog>

    <q-dialog v-model="persistent2" maximized full-height seamless position="right" @hide="closeperFormTwo">
      <q-card style="margin-top:61px;width:600px" class="no-border-radius classinfo_Dialog">
        <div class="drawerTop">
          <div style="display:flex;align-items:center;margin:20px 0 0 20px">
            <span class="drawer_Span">短信设置</span>
          </div>
        </div>
        <div style="padding:20px 15px;">
          <q-radio v-model="baseEditMsg.StoreType" style="margin-right:20px;" v-for="(item,index) in statusData"
            :key="index" v-if="item.Id>0" :val="item.Id" :label="item.Name" />
        </div>
        <div class="col-12" style="margin:0 20px;">
          <q-toggle size="md" label="模板状态" color="primary" :false-value="1" :true-value="0"
            v-model="baseEditMsg.TemplateStaus" />
        </div>
        <div class="col-12" style="margin:20px 24px;">
          <q-select standout="bg-primary text-white" v-model="baseEditMsg.BaseTemplateType" :options="moduleList"
            option-value="Id" option-label="Name" emit-value map-options label="模板类型" />
        </div>
        <div filled class="col-12" style="margin:30px 24px 0 24px;">
          <q-input filled stack-label maxlength="100" :dense="false" v-model="baseEditMsg.Sign" class="col-12"
            label="签名" :rules="[val => !!val || '请填写签名']" />
        </div>
        <div filled class="col-12" style="margin:20px 24px 0 24px;">
          <q-input filled stack-label maxlength="100" :dense="false" v-model="baseEditMsg.TemplateId" class="col-12"
            label="模板id" :rules="[val => !!val || '请填写模板id']" />
        </div>
        <div style="margin:30px 10px 0 0;text-align:right;">
          <q-btn color="accent" class="q-mr-md" icon="add" label="保存" @click="saveSatMsg()" />
        </div>
      </q-card>
      <div class="dialog-out-close" @click="closeperFormTwo"
        style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
        <q-icon name="iconfont icon-jujue1" size="26px" />
      </div>
    </q-dialog>
  </div>
</template>

<script>
  import {
    getMsgPage,
    getConfigPage,
    EditMsgConfig,
    GetMsgBaseList,
    GetMsgBaseTemplatePageList,
    GetBaseTemplateTypeEnumList,
    SetMsgBaseTemplate
  } from '../../api/system/msg';

  import {
    getConfigStatus
  } from '../../api/system/index';

  export default {
    meta: {
      title: "短信管理"
    },
    data() {
      return {
        tabCheck: 'first',
        //短信流水column
        columns: [{
            name: 'SendStatus',
            label: '状态',
            field: 'SendStatus',
            align: 'left'
          },
          {
            name: 'ReceiverName',
            required: true,
            field: 'ReceiverName',
            label: '目标',
            align: 'left',
          },
          {
            name: 'SendContent',
            label: '内容',
            field: 'SendContent',
            align: 'left'
          },
          {
            name: 'CreateDateStr',
            label: '发送时间',
            field: 'CreateDateStr',
            align: 'left'
          },
          {
            name: 'CreateByName',
            label: '创建人',
            align: 'left',
            field: 'CreateByName'
          }
        ],
        //短信配置column
        columns2: [{
          name: 'StoreType',
          label: '类型',
          field: 'StoreType',
          align: 'left'
        }, {
          name: 'MsgBase',
          label: '配置信息	',
          field: 'MsgBase',
          align: 'left'
        }, {
          name: 'optioned',
          label: '操作',
          field: 'optioned'
        }],
        data: [],
        loading: true,
        loading2: true,
        waterMsg: {
          pageIndex: 1,
          pageSize: 12,
          SendStatus: 0, //发送状态
          StartDate: '', //开始时间
          EndDate: '', //结束时间
          ReceiverName: '', //接收人
          SendContent: '' //发送内容
        },
        ShowOpts: [{
            label: '全部',
            value: 0
          },
          {
            label: '失败',
            value: 1
          },
          {
            label: '成功',
            value: 2
          }
        ],

        ConfigMsg: {
          PageIndex: 1,
          PageSize: 12,
          StoreType: 0 //类型
        },
        configEditMsg: {
          ID: 0,
          StoreType: 1,
          MsgBase: {
            RegionId: '', //地区
            Domain: '', //域名
            AccessKeyId: '', //秘钥Key
            AccessSecret: '' //秘钥Secret
          }
        },

        //获取短信设置msg
        setMsg: {
          PageIndex: 1,
          StoreType: 0,
          PageSize: 12
        },
        statusData: [], //发送状态
        //短信配置数据
        configData: [],
        pageCountConfig: 0, //配置 页数
        baseEditMsg: {
          ID: 0,
          StoreType: 1, //短信供应商 1-腾讯云，2-阿里，3-其他
          TemplateStaus: 0, //模板状态，0-正常，1-禁用
          BaseTemplateType: 1, //模板类型
          Sign: '', //签名
          TemplateId: '' //模板id
        },
        moduleList: [], //配置类型列表
        setUpData: [], //短信设置数据
        setDataCount: 0, //短信设置页数
        dateListOne: [], //日期

        persistent1: false,
        persistent2:false,
      }
    },
    mounted() {
      this.getStatus();
      this.getList();
    },
    methods: {
      tabChange() {
        if (this.tabCheck == 'first') {
          this.getList();
        } else if (this.tabCheck == 'second') {
          this.getConfigList();
        } else {
          this.getSetingMsg();
          this.getModoleType();
        }
      },
      //获取短信流水数据
      getList() {
        this.loading = false;
        if (this.dateListOne && this.dateListOne.length > 0) {
          this.waterMsg.StartDate = this.dateListOne[0];
          this.waterMsg.EndDate = this.dateListOne[1];
        } else {
          this.waterMsg.StartDate = '';
          this.waterMsg.EndDate = '';
        }

        getMsgPage(this.waterMsg).then(res => {
          this.data = res.Data.PageData;
          this.loading = false;
          this.pageCount = res.Data.PageCount;
        }).catch(() => {
          this.loading = false
        })
      },
      //翻页
      changePage(val) {
        this.waterMsg.pageIndex = val;
        this.getList()
      },

      //翻页!
      changePage2(val) {
        this.ConfigMsg.pageIndex = val;
        this.getConfigList()
      },
      //短信配置翻页
      changePage3(val) {
        this.setMsg.pageIndex = val;
        this.getSetingMsg()
      },
      //获去下拉状态
      getStatus() {
        let msg = {
          Type: 1
        }
        getConfigStatus(msg).then(res => {
          if (res.Code == 1) {
            this.statusData = res.Data;
            let obj = {
              Name: '全部',
              Id: 0
            }
            this.statusData.unshift(obj);
          }
        })
      },
      //获取短信配置数据
      getConfigList() {
        this.loading2 = true;
        getConfigPage(this.ConfigMsg).then(res => {
          this.loading2 = false;
          if (res.Code == 1) {
            this.configData = res.Data.PageData;
            this.pageCountConfig = res.Data.PageCount;
          }
        }).catch(() => {
          this.loading2 = false;
        })
      },
      //新增配置
      addConfig() {
        this.persistent1 = true;
        this.configEditMsg.ID = 0;
        this.configEditMsg.StoreType = 1;
        this.configEditMsg.MsgBase.RegionId = '';
        this.configEditMsg.MsgBase.Domain = '';
        this.configEditMsg.MsgBase.AccessKeyId = '';
        this.configEditMsg.MsgBase.AccessSecret = '';
      },
      //修改配置
      EditConfig(obj) {
        let msg = {
          ID: obj.ID
        }
        this.persistent1 = true;
        GetMsgBaseList(msg).then(res => {
          if (res.Code == 1) {
            var data = res.Data;
            this.configEditMsg.ID = data.ID;
            this.configEditMsg.StoreType = data.StoreType;
            this.configEditMsg.MsgBase.RegionId = data.MsgBase.RegionId;
            this.configEditMsg.MsgBase.Domain = data.MsgBase.Domain;
            this.configEditMsg.MsgBase.AccessKeyId = data.MsgBase.AccessKeyId;
            this.configEditMsg.MsgBase.AccessSecret = data.MsgBase.AccessSecret;
          }
        })
      },
      //保存配置
      saveConfig() {
        if (this.configEditMsg.MsgBase.RegionId == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写地区`
          })
          return;
        }
        if (this.configEditMsg.MsgBase.Domain == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写域名`
          })
          return;
        }
        if (this.configEditMsg.MsgBase.AccessKeyId == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写秘钥Key`
          })
          return;
        }
        if (this.configEditMsg.MsgBase.AccessSecret == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写秘钥Secret`
          })
          return;
        }
        EditMsgConfig(this.configEditMsg).then(res => {
          this.$q.notify({
            type: 'iconfont icon-chenggong',
            position: "top",
            message: `保存成功`
          })
          this.persistent1 = false;
          this.getConfigList();
        }).catch(() => {

        })
      },
      //获取短信设置下拉模板类型
      getModoleType() {
        GetBaseTemplateTypeEnumList().then(res => {
          if (res.Code == 1) {
            this.moduleList = res.Data;
          }
        }).catch(() => {

        })
      },
      //获取短信设置数据
      getSetingMsg() {
        GetMsgBaseTemplatePageList(this.setMsg).then(res => {
          if (res.Code == 1) {
            this.setUpData = res.Data.PageData;
            this.setDataCount = res.Data.PageCount;
          }
        }).catch(() => {

        })
      },
      //新增短信设置数据
      addSetcfig() {
        this.baseEditMsg.ID = 0;
        this.baseEditMsg.StoreType = 1;
        this.baseEditMsg.TemplateStaus = 0;
        this.baseEditMsg.BaseTemplateType = 1;
        this.baseEditMsg.Sign = '';
        this.baseEditMsg.TemplateId = '';
        this.persistent2=true;
      },
      //修改数据
      getMsgInfo(item) {
        this.persistent2=true;
        this.baseEditMsg.ID = item.ID;
        this.baseEditMsg.StoreType = item.StoreType;
        this.baseEditMsg.TemplateStaus = item.TemplateStaus;
        this.baseEditMsg.BaseTemplateType = item.BaseTemplateType;
        this.baseEditMsg.Sign = item.Sign;
        this.baseEditMsg.TemplateId = item.TemplateId;
      },
      //保存短信设置数据
      saveSatMsg() {
        if (this.baseEditMsg.Sign == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写签名`
          })
          return;
        }
        if (this.baseEditMsg.TemplateId == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写模板id`
          })
          return;
        }
        SetMsgBaseTemplate(this.baseEditMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              type: 'iconfont icon-chenggong',
              position: "top",
              message: `保存成功`
            })
            this.getSetingMsg();
            // this.msgDrawdia = false;
            this.persistent2 = false;
          }
        }).catch(() => {

        })

      },
      closeperForm() {
        this.persistent1 = false;
      },
      closeperFormTwo(){
        this.persistent2 = false;
      }
    }
  }

</script>
<style lang="sass">
 @import url('~assets/css/table.sass')

</style>
