<template>
  <div>
    <el-dialog :title="title" :visible.sync="myShowModal" class="template-dlg">
      <div class="search-bar" align="left" :style="{'margin-bottom':'10px'}">
        <el-input placeholder="请输入模板文件名称" v-model="search" :style="{'width':'160px'}"></el-input>
        <el-button type='primary' @click="searchTemplateClickHandler">搜 索</el-button>
      </div>
      <el-table :data="templateList" tooltip-effect="dark" v-loading="templateDataLoading" class="dataList_dlg">
        <el-table-column width="60" align="center" type="index">
        </el-table-column>
        <el-table-column min-width="40%" label="文件">
          <template slot-scope="scope">
            <el-radio class="radio" v-model="path" :label="scope.row.fileName">
              <i class="fa fa-text-height" style="color:#FFC125"></i>
              <span :title="scope.row.fileName">{{scope.row.fileName}}</span>
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="fileSize" label="大小" width="70" align="center"></el-table-column>
        <el-table-column label="名称" width="100" align="center">
          <template slot-scope="scope">
            <span :title="scope.row.name">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="modifyTime" label="最后修改时间" width="180" align="center"></el-table-column>
      </el-table>
      <div slot="footer">
        <el-button @click="myShowModal = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      search: '',
      templateDataLoading: false,
      templateList: [],
      path: ''
    }
  },
  computed: {
    myShowModal: {
      set(val) {
        this.$emit('update:isShowModal', val)
      },
      get() {
        return this.isShowModal
      }
    }
  },
  methods: {
    searchTemplateClickHandler() {
      this.loadTemplateList()
    },
    async loadTemplateList() {
      let opts = {
        type: this.templateAttribute.templateType,
        name: this.search,
        platformID: this.platformID
      }
      this.templateDataLoading = true
      let res = await axios.get('/ui/template/bindselectgrid', {
        params: opts
      })
      this.templateDataLoading = false
      this.templateList = res.data.data
    },
    confirm() {
      this.$emit('getTemplatePath', {path: this.path})
      this.$emit('update:isShowModal', false)
    }
  },
  watch: {
    isShowModal: function(val) {
      if (val) {
        this.path = this.templateAttribute.path
        this.search = ''
        this.loadTemplateList()
      }
    }
  },
  props: {
    isShowModal: Boolean,
    title: String,
    siteID: [Number, String],
    platformID: String,
    templateAttribute: Object
  }
}
</script>
<style>
.template-dlg .el-dialog{
  width:600px;
}
@media (max-width:480px){
  .template-dlg .el-dialog{
    width:96%;
  }
}
</style>
