<template>
  <div class="templateList">
    <div class="form-box">
      <el-form
        ref="searchForm"
        :model="searchForm"
        label-position="left"
        size="mini"
        label-width="80px"
      >
        <el-row :gutter="36">
          <el-col :span="12">
            <el-form-item label="模板名称" prop="modelName">
              <el-input v-model="searchForm.modelName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间" prop="creatTime">
              <el-date-picker
                v-model="searchForm.creatTime"
                type="daterange"
                range-sperator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="button">
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleResetSearch">重置</el-button>
      </div>
    </div>

    <div class="control-button">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="handleAddTemplate"
      >新增</el-button>
      <el-button
        :disabled="selectedRow.length <= 0"
        @click="handleBatchDelete"
      >批量删除</el-button>
    </div>

    <div class="table-box">
      <el-table
        ref="tableRef"
        :data="tableData"
        size="mini"
        style="widht: 100%"
        ighlight-current-row
        @selection-change="handleChangeSelection"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="模板名称" prop="modelName" min-width="160" />
        <el-table-column label="模板类型" prop="modelType" min-width="160">
          <template slot-scope="scope">
            {{
              typeOptions.filter((item) => item.value === scope.row.modelType)
                .length > 0
                ? typeOptions.filter(
                  (item) => item.value === scope.row.modelType
                )[0].label
                : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column label="创建者" prop="createdBy" min-width="160" />
        <el-table-column label="创建时间" prop="createdTime" min-width="160">
          <template slot-scope="scope">
            {{ parseTime(scope.row.createdTime) }}
          </template>
        </el-table-column>
        <el-table-column
          label="最近更新时间"
          prop="updatedTime"
          min-width="160"
        >
          <template slot-scope="scope">
            {{ parseTime(scope.row.updatedTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="edit" width="160" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope)"
            >编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click="handleCopy(scope)"
            >复制</el-button>
            <!-- <el-button
              type="text"
              size="small"
              @click="handleSelectScope(scope.row)"
            >使用范围</el-button> -->
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handlepageChange"
      />
    </div>

    <el-dialog title="使用范围" :visible.sync="showDialog" width="500px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="使用范围">
          <el-select
            v-model="form.scope"
            multiple
            plaaceholder="下拉选择该模板使用的网格范围，多选"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="handleCancelScope">取消</el-button>
        <el-button type="primary" @click="handleSaveScope">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="showTips" width="30%">
      <span>确认删除选中的数据吗？</span>
      <div slot="footer">
        <el-button @click="handleCancelDelete">取消</el-button>
        <el-button type="primary" @click="handleConfirmDelete">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getModelList, deleteByIds } from '@/api/configure/template.js'
import { parseTime } from '@/utils/ruoyi.js'
import { TimeSelect } from 'element-ui'
export default {
  data() {
    return {
      searchForm: {},
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      showDialog: false,
      form: { scope: [] },
      deleteIds: [],
      showTips: false,
      selectedRow: [],
      typeOptions: [
        { label: '个人', value: '0' },
        { label: '商户', value: '1' },
        { label: '企业', value: '2' }
      ]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const params = {
        page: this.currentPage,
        pageSize: this.pageSize,
        modelName: this.searchForm.modelName,
        startDate: this.searchForm.creatTime?.[0],
        endDate: this.searchForm.creatTime?.[1]
      }

      getModelList(params).then((res) => {
        this.tableData = res.rows || []
        this.total = res.total
      })
    },

    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.getData()
    },

    handlepageChange(newPage) {
      this.currentPage = newPage
      this.getData()
    },

    handleSearch() {
      this.currentPage = 1
      this.getData()
    },

    handleResetSearch() {
      this.searchForm = {}
      this.handleSearch()
    },

    handleAddTemplate() {
      this.$router.push({
        path: '/configure/dynamicTemplate'
      })
    },

    handleSelectScope(row) {
      console.log(row)
      this.form = { scope: [] }
      this.showDialog = true
    },

    handleCancelScope() {
      this.showDialog = false
    },

    handleSaveScope() {
      this.showDialog = false
    },

    handleEdit(scope) {
      this.$router.push({
        path: '/configure/dynamicTemplate',
        query: {
          type: 'edit',
          data: JSON.stringify(scope.row)
        }
      })
    },

    handleCopy(scope) {
      this.$router.push({
        path: '/configure/dynamicTemplate',
        query: {
          type: 'copy',
          data: JSON.stringify(scope.row)
        }
      })
    },

    handleDelete(scope) {
      this.deleteIds = [scope.row.uuid]
      this.showTips = true
    },

    handleCancelDelete() {
      this.deleteIds = []
      this.showTips = false
    },

    handleConfirmDelete() {
      const params = this.deleteIds.map(item => `uuids=${item}`).join('&')
      deleteByIds(params).then((res) => {
        if (res.code === 200) {
          this.showTips = false
          this.$message.success('删除成功')
          this.currentPage = 1
          this.pageSize = 10
          this.total = 0
          this.getData()
        }
      })
    },

    handleChangeSelection(selection) {
      this.selectedRow = selection
    },

    handleBatchDelete() {
      this.deleteIds = this.selectedRow.map((item) => item.uuid)
      this.showTips = true
    }
  }
}
</script>

<style scoped lang="scss">
.templateList {
  padding: 30px 16px;
  .form-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .control-button {
    margin-bottom: 16px;
  }

  .table-box {
    .el-pagination {
      float: right;
      margin-top: 8px;
    }
  }
}
</style>
