<style>
  .WebSiteTemplateDetails .el-button.is-circle {
    padding: 6px;
  }

  .WebSiteTemplateDetails .preview {
    color: #409eff;
    text-decoration: underline
  }

</style>
<template>
  <!--契约管理-->
  <div class="WebSiteTemplateDetails">
    <div class="query-box">
      <ul>
        <li>
          <input type="button" class="hollowFixedBtn" @click="GoToTemplatepage()" :value="$t('adm.adm_fhlb')" />
          <input type="button" class="normalBtn" @click="outerVisible=true,clearMsg()" :value="$t('objFill.v101.tianjiamoban')" />
        </li>
      </ul>
    </div>
    <div>
      <el-table :data="dataList" style="width: 100%" v-loading="loading"
        :default-sort="{prop: 'date', order: 'descending'}">
        <el-table-column prop="Id" :label="$t('hotel.hotel_SerialNumber')" sortable width="100">
        </el-table-column>
        <el-table-column prop="TemplateName" :label="$t('objFill.v101.mobanmincheng')" sortable width="150">
        </el-table-column>
        <el-table-column prop="SubTemplateName" :label="$t('system.query_airName')" sortable  width="150">
          <template slot-scope="scope">
            <span style="color:blue;">
              {{scope.row.SubTemplateName}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="TemplateData" :label="$t('objFill.v101.mobanshuju')" sortable>
          <template slot-scope="scope">
            <span v-html="scope.row.TemplateData">
            </span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('system.table_operation')" sortable width="160">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
              <el-button type="primary" icon="el-icon-edit" circle @click="outerVisible = true,updateData(scope.row)">
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
              <el-button type="danger" icon="el-icon-delete" circle @click="deleteData(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="$t('objFill.v101.mobanpeizhi')" :visible.sync="outerVisible" center width="700px">
      <el-form :model="addMsg" ref="addMsg" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('objFill.v101.mobanmincheng')">
              <el-input type="text" v-model="addMsg.SubTemplateName" maxlength="50" :placeholder="$t('objFill.v101.mobanmincheng')">
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('objFill.v101.mobanxiangqi')">
              <el-input type="textarea" :autosize="{ minRows: 10}" :placeholder="$t('fnc.qsrneirong')" v-model="addMsg.Data">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> &nbsp;
        <button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        Id: 0, //地址栏编号
        loading: false,
        //弹窗
        outerVisible: false,
        dataList: [],
        addMsg: {
          Id: 0, //编号
          TemplateId: 0, //模板编号
          SubTemplateName: '', //子项模板名称
          Data: '', //模板数据
        },
      }
    },
    created() {
      if (this.$route.query.Id) {
        this.Id = this.$route.query.Id;
        this.addMsg.TemplateId = this.$route.query.Id;
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      //获取配置
      getData() {
        //获取现有线路列表
        this.loading = true;
        this.apipost(
          "ws_get_GetTemplateDetailsList", {
            TemplateId: this.Id
          },
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.dataList = res.data.data;
            }
          },
          err => {}
        );
      },
      handleCurrentChange(val) {
        //翻页功能按钮
        this.msg.pageIndex = val;
        this.getData();
      },
      resetPageIndex() {
        //查询初始化页码
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      //修改
      updateData(item) {
        this.apipost(
          "ws_get_GetTemplateDetails", {
            Id: item.Id,
          },
          res => {
            if (res.data.resultCode == 1) {
              var tempData = res.data.data;
              this.addMsg.Id = tempData.Id;
              this.addMsg.SubTemplateName = tempData.SubTemplateName;
              this.addMsg.Data = tempData.Data;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //删除
      deleteData(item) {
        var that = this;
        that.Confirm(that.$t('tips.shifoushanchu'), function () {
          that.apipost(
            "ws_post_RemoveTemplateDetails", {
              Id: item.Id
            },
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getData();
              } else {
                that.Error(res.data.message);
              }
            },
            null
          );
        });
      },
      //清空数据
      clearMsg() {
        this.addMsg.Id = 0;
        this.addMsg.SubTemplateName = "";
        this.addMsg.Data = "";
      },
      //新增、修改模板
      submitForm(addMsg) {
        this.apipost(
          "ws_post_SetTemplateDetails", this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.getData();
              this.clearMsg();
              this.Success(res.data.message);
              this.outerVisible = false;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //跳转到模板管理页面
      GoToTemplatepage() {
        this.$router.push({
          name: "WebSiteTemplate",
          query: {
            blank: 'y',
            tab: '模板管理'
          }
        });
      }
    }
  }

</script>