<template>
  <div>
    <el-dialog :title="title" :visible.sync="isShow" @open="dialogOpen" :append-to-body="true" class="template-select-dialog">
      <!-- 顶部搜索栏 -->
      <div style="margin:0 0 10px 0;">文件：
        <el-input class="e-input" v-model="searchName" @keyup.enter.native="loadingTemplateData" placeholder="请输入文件名称"></el-input>
        <el-button class="through-btn" @click="loadingTemplateData" type="primary">搜索</el-button>
      </div>
      <!-- 模板数据表格 -->
      <el-table :data="templatesData" ref="singleTable" height="400" highlight-current-row @row-click="selecteRow" style="border-top: 1px solid #eee;" v-loading="templatesLoading">
        <el-table-column type="index" label="序号" width="60" show-overflow-tooltip></el-table-column>
        <el-table-column label="文件" min-width="38%" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-radio v-model="radio" :label="scope.row.fileName" style="font-weight:normal">
              <i class="fa fa-text-height" style="color:#FFC125"></i>
              &nbsp;{{scope.row.fileName}}
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="fileSize" label="大小" min-width="14%" v-model="templatesData.fileSize" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="名称" min-width="18%" v-model="templatesData.name" show-overflow-tooltip></el-table-column>
        <el-table-column prop="modifyTime" label="最后修改时间" min-width="24%"  show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.modifyTime | fixDateTime}}
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部确认按钮 -->
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirmTemplate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  filters: {
    fixDateTime: function(val) {
      if (!val) {
        return ''
      }
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      templatesLoading: false,
      templatesData: [],
      radio: '',
      searchName: ''
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    async loadingTemplateData() {
      this.templatesLoading = true
      try {
        const res = await axios.get(`/ui/template/bindselectgrid`, {
          params: {
            siteID: this.siteID,
            platformID: this.platformID,
            type: this.type,
            name: this.searchName
          }
        })
        this.templatesData = res.data.data
      } catch (e) {}
      this.templatesLoading = false
    },
    dialogOpen() {
      this.radio = this.value
      this.searchName = ''
      this.loadingTemplateData()
    },
    // 单行选中事件
    selecteRow(row) {
      this.radio = row.fileName
    },
    // 确认
    confirmTemplate() {
      this.$emit('callback', this.radio)
      this.isShow = false
    }
  },
  props: {
    title: {
      default: '选择模板文件'
    },
    show: {
      type: Boolean
    },
    siteID: {
      type: [String, Number]
    },
    value: {
      type: String
    },
    platformID: {
      type: [String, Number]
    },
    type: {
      type: String
    }
  }
}
</script>
<style>
/* 在一般情况下dialog宽为680像素，在逻辑分辨率480像素以下dialog宽为96% */

.template-select-dialog .el-dialog {
  width: 680px;
}

@media (max-width: 480px) {
  .template-select-dialog .el-dialog {
    width: 96%;
  }
}
</style>

<style scoped>
.through-btn {
  width: 60px;
}

.e-input {
  width: 240px;
}
</style>
