<template>
  <div class="layout server">
    <div class="title">
      <h3>草稿/模板</h3>
    </div>
    <el-button type="primary"  @click="refresh">刷新</el-button>
    <div class="content">
      <div>
        <h3 class="h3">草稿</h3>
        <table-list :ref="tk1" :options="optionsTable1"></table-list>  
        <alert-dialog ref="alertDialogKey"></alert-dialog>
      </div>
      <div>
        <h3 class="h3">模板</h3>
        <table-list :ref="tk2" :options="optionsTable2"></table-list>  
        <alert-dialog ref="alertDialogKey"></alert-dialog>
      </div>
    </div>
    <choose-app :params="params" :ref="tKey" :t-key="tKey" :cb="getShopCb"></choose-app>
  </div>
</template>
<script>

import TableList from "./../../core/comps/table/tableList.vue";
import { configUrl } from "./../../utils/config.js";
import { mapState, mapActions } from "vuex";
import moment from 'moment';
import alertDialog from "../../core/comps/input/alertDialog.vue";
import commonUtil from './../../core/tool/commonUtil';
import chooseApp from "./../../components/marketing/businessComp/chooseApp.vue";
export default {
    name: 'draft',
    components: {TableList,alertDialog,chooseApp},
    data () {
      return {
        data:[],
        tk1:"draftTableKey1",
        tk2:"draftTableKey2",
        tKey: "chooseApp",
        params:"",
        draft:"draft",
        ruleForm: {
          //副标题
          subTitle: "",
        },
        rules:{
          subTitle: [
            {
              min: 1,
              max: 50,
              message: "副标题最大50个字符!",
              trigger: "blur"
            }
          ],
        },
        optionsTable1:{
            actions :[
              {key:"edit",val:"转为模板(4)",action:this.addToTemplate}
            ],
            map:[
                {key:"draftId",val:"草稿ID"},
                {key:"userVersion",val:"版本号"},
                {key:"createTime",val:"创建时间",type:'dateTime'},
                {key:"userDesc",val:"版本描述"}, 
            ],
            getUrl:()=>{
                return configUrl.tempDraftList;
            },
            pageOption:{
                showIf:false,
                sizeKey:"pageSize",
                indexKey:"pageNum",
                index:1,
                size:10
            },
            analysis:(res)=>{
              res.data.map((item,index)=>{
                item.createTime=Number(item.createTime)*1000
              })
              return {
                data:res.data,
                count:res.data.total
              };
            }
          },
          optionsTable2:{
            actions :[
              {key:"edit",val:"删除",action:this.goDelete},
              {key:"edit",val:"提交(5)",action:this.choseAPP},
            ],
            map:[
                {key:"templateId",val:"模板ID"},
                {key:"userVersion",val:"版本号"},
                {key:"createTime",val:"创建时间",type:'dateTime'},
                {key:"userDesc",val:"版本描述"}
            ],
            getUrl:()=>{
                return configUrl.getTempList;
            },
            pageOption:{
                showIf:false,
                sizeKey:"pageSize",
                indexKey:"pageNum",
                index:1,
                size:10,
            },
            analysis:(res)=>{
              res.data.map((item,index)=>{
                item.createTime=Number(item.createTime)*1000
              })
              return {
                  data:res.data,
                  count:res.data.total
              };
            }
          }
      }
    },
    computed:{
      ...mapState({
          topNav:state=>state.topNav.data, //将 this.topNav 映射为  this.$store.topNav.data
          channels:state=>state.couponStore.channels,
          index:state=>state.topNav.index
      })
    },
    methods:{
      ...mapActions([
        "setIndex"
      ]),
      //选择小程序
      choseAPP(item) {
        console.log(item)
        this.params = JSON.stringify(item);
        this.$refs[this.tKey].openDialog(this.params);
      },
      //选择小程序
      getShopCb(items) {
        this.shopTableData = [];
        items.data.map((item, index) => {
          let haveIf = false;
          this.shopTableData.map((item01, index01) => {
            if(item.id == item01.id) {
              haveIf = true
            }
          })
          if (haveIf == false) {
            item.merchantName = item.name;
            item.merchantLinkPhone = item.linkPhone
            this.shopTableData.push(item);
          }
        })
      },
      //删除模板
      goDelete(item) {
        this.$refs['alertDialogKey'].openDialog("此操作会删除草稿, 是否继续?",() => {
          let params = { templateId: item.templateId}
          this.postFetch(configUrl.deleteTemplate, params).then(d => {
              this.showAlertMsg("success", '操作成功!');
              this.search();
          })
        });
      },
      //将草稿转为模板
      addToTemplate(item) {
        this.$refs['alertDialogKey'].openDialog("此操作会将草稿转为模板, 是否继续?",() => {
          let params = { draftId: item.draftId};
          this.postFetch(configUrl.addToTemplate, params).then(d => {
              this.showAlertMsg("success", '操作成功!');
              this.search();
          })
        })
      },
      search:function(){
        let tk1 = this.$refs[this.tk1];
        let tk2 = this.$refs[this.tk2];
        tk1.search(tk1.getParams().index);
        tk2.search(tk2.getParams().index);
      },
      //刷新
      refresh(){
        //更新草稿列表
        //更新模板列表
        this.search();
      }
    },
    mounted(){
      
    },
    created() {
      this.setIndex("3");
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tableContainer{
  width: 100%;
  margin-top: 30px;
}
.h3{
  font-size: 16px;
}
.sever{
  border-radius: 4px;
  border:1px solid #e7e7eb;
  padding: 0 20px 10px;
  margin-bottom: 20px;
}
.title{
  margin-bottom: 10px;
}
.title h3{
  font-size: 18px;
  font-weight: bold;
}
.layout-content{
  background: #fff;
  overflow: hidden;
}
.btn-group{
  text-align: center;
  margin-top: 26px;
}
.layout-content table{
  width:100%;
}
.layout-content table tr td{
  padding:17px 0;
  text-align:left;
}
.layout-content table tr td:nth-child(1){
  padding:17px 0 17px 18px;
  width:200px;
  text-align:center;
}
.layout-content table tr td:nth-child(2){
  padding:17px 15px;
  width:10px;
  text-align:center;
}
.layout-content table tr td:nth-child(3){
  padding:17px 10px 17px 0;
  width:180px;
  text-align:center;
}
.layout-content table tr td:nth-child(4){
  padding:17px 10px;
  width:240px;
  text-align:center;
}
.layout-content table tr td:nth-child(5){
  padding:17px 10px;
  text-align:left;
}
.layout-content table tr:hover{
  cursor:pointer;
  background:#F4F7F9;
}

.editBox,.delBox{
  width:40px;
  height:40px;
  text-align:center;
  line-height:40px;
  display:inline-block;
  color:#fff;
  font-size:14px;
  border-radius:3px;
  margin-right:20px;
  display:none;
}
.editBox{
  background:#51A9C9;
}
.delBox{
  background:#EE7653;
}
.layout-content table tr:hover .editBox{
  display:inline-block;
}
.layout-content table tr:hover .delBox{
  display:inline-block;
}
.btnGroupBox{
  margin-top:20px;
}
.addBox{
  width:146px;
  height:40px;
  text-align:center;
  line-height:40px;
  display:inline-block;
  color:#fff;
  font-size:14px;
  border-radius:3px;
  margin-right:20px;
  background:#6B5EC9;
  cursor:pointer;
}

.addBox i{
  margin-right:5px;
}
.saveBox{
  width:91px;
  height:40px;
  text-align:center;
  line-height:40px;
  display:block;
  color:#fff;
  font-size:14px;
  border-radius:3px;
  background:#51A9C9;
  margin: 0 auto!important;
  cursor:pointer;
}
.addBox:hover{
  background:#7A6CE1;
}
.addBox:active{
  background:#6357BB;
}
.editBox:hover{
  background:#5DC1E5;
}
.editBox:active{
  background:#4490AB;
}
.saveBox:hover{
  background:#5DC1E5;
}
.saveBox:active{
  background:#4490AB;
}
.delBox:hover{
  background:#FF8460;
}
.delBox:active{
  background:#DF6F4E;
}
</style>
<style>
 .save{
   display: block;
   width:90px;
   margin:0 auto;
 }
 .tips{
   color:red;
   text-align:center;
   margin-top:10px;
 }
</style>
