<template>
  <ai-list>
    <ai-title slot="title" title="大屏列表" isShowBottomBorder/>
    <template slot="content">
      <ai-search-bar>
        <template #left>
          <ai-select
              v-model="search.status"
              @change="search.current = 1, getList()"
              placeholder="发布状态"
              :selectList="dict.getDict('cwpStatus')">
          </ai-select>
          <el-button type="primary" @click="toEdit('')">添加大屏</el-button>
          <el-button type="primary" @click="toAddData">数据源管理</el-button>
        </template>
        <template #right>
          <el-input
              v-model="search.name"
              size="small"
              placeholder="请输入模板名称或创建人"
              clearable
              v-throttle="() => {search.current = 1, getList()}"
              @clear="search.current = 1, search.title = '', getList()"
              suffix-icon="iconfont iconSearch">
          </el-input>
        </template>
      </ai-search-bar>
      <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="total"
          v-loading="loading"
          style="margin-top: 6px;"
          :current.sync="search.current"
          :size.sync="search.size"
          @getList="getList">
        <el-table-column slot="options" width="160px" fixed="right" label="操作" align="center">
          <template slot-scope="{ row }">
            <div class="table-options">
              <el-button type="text" @click="toEdit(row.id)">编辑</el-button>
              <el-button type="text" @click="copy(row.id)">复制</el-button>
            </div>
          </template>
        </el-table-column>
      </ai-table>
      <ai-dialog
          :visible.sync="isShowAdd"
          width="780px"
          title="复制大屏"
          @close="onClose"
          @onConfirm="onConfirm">
        <el-form ref="form" :model="form" label-width="110px" label-position="right">
          <div class="ai-form" :model="form" label-width="110px" label-position="right">
            <el-form-item label="名称" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
              <el-input size="small" placeholder="请输入名称" v-model="form.name"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </ai-dialog>
    </template>
  </ai-list>
</template>

<script>
export default {
  name: 'FormList',
  props: {
    instance: Function,
    dict: Object,
    areaId: String,
    urlPrefix: String
  },

  data() {
    return {
      search: {
        current: 1,
        status: '',
        size: 10,
        name: ''
      },
      form: {
        name: ''
      },
      id: '',
      isShowAdd: false,
      colConfigs: [
        {prop: 'name', label: '模板名称'},
        {prop: 'createUserName', align: 'center', label: '创建人'},
        {prop: 'description', align: 'center', label: '描述'},
        {prop: 'status', align: 'center', label: '状态', formart: v => this.dict.getLabel('cwpStatus', v)},
        {prop: 'createTime', align: 'center', label: '创建时间'}
      ],
      tableData: [],
      total: 0,
      loading: false
    }
  },

  created() {

    this.dict.load('cwpStatus').then(() => {
      this.getList()
    })
  },

  mounted() {
    this.loading = true
  },

  methods: {
    copy(id) {
      this.id = id
      this.isShowAdd = true
    },

    onClose() {
      this.id = ''
      this.form.name = ''
    },

    onConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.instance.post(`${this.urlPrefix}/appdiylargescreen/copyLargeScreenProject`, null, {
            params: {
              ...this.form,
              id: this.id
            }
          }).then(res => {
            if (res.code === 0) {
              this.$message.success('复制成功')
              this.isShowAdd = false

              this.getList()
            }
          })
        }
      })
    },

    getList() {
      this.instance.post(`${this.urlPrefix}/appdiylargescreen/allLargeScreenProjectByPage`, null, {
        params: {
          ...this.search
        }
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
        } else {
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    toEdit(id) {
      this.$router.push({hash: "#add", query: {id}})
    },
    toAddData() {
      this.$router.push({hash: "#sourceData"})
    }
  }
}
</script>
