<template>
  <div class="app-container">
    <!-- 筛选条件 -->
    <div>
      <el-form ref="searchForm" :model="searchForm" label-width="100px" size="mini" label-position="left">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="标题:" prop="title">
              <el-input v-model="searchForm.title" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="状态:" prop="status">
              <el-select clearable style="width: 100%" v-model="searchForm.status" placeholder="全部">
                <el-option label="正常" :value="true" />
                <el-option label="隐藏" :value="false" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="备注:" prop="remark">
              <el-input v-model="searchForm.remark" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="6">
            <el-form-item label class="fr">
              <el-button size="mini" @click="emptyFn">重置</el-button>
              <el-button size="mini" type="primary" @click="searchFn">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 按钮 -->
    <div class="btn-group clearfix">
      <div class="fl">
        <el-button class="fl" type="primary" size="mini" @click="showDialog">新增</el-button>
        <div class="tips fl">导入模板第一行必须为空白行、第一列必须为师傅编号（师傅S编号）</div>
      </div>
    </div>
    <!-- 列表 -->
    <div class="mymain-container">
      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <el-table-column align="center" label="操作" fixed width="160">
            <template slot-scope="scope">
              <el-button type="text" @click="downloadFile(scope.row.id)">下载</el-button>
              <el-button type="text" @click="statusFn(scope.row)">{{ scope.row.status ? '隐藏' : '显示' }}</el-button>
              <el-popconfirm style="margin-left: 10px" @confirm="deleteFn(scope.row.id)" title="确定删除吗？">
                <el-button type="text" class="textColor" slot="reference">删除</el-button>
              </el-popconfirm>
              <!-- <el-button type="text" @click="deleteFn(scope.row.id)">删除</el-button> -->
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="标题"
            prop="title"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="left" label="状态" prop="status" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag size="mini" v-show="scope.row.status === true" type="success">正常</el-tag>
              <el-tag size="mini" v-show="scope.row.status === false" type="danger">隐藏</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="备注"
            prop="remark"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="创建人"
            prop="createBy"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="创建时间"
            prop="createTime"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="修改人"
            prop="updateBy"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="修改时间"
            prop="updateTime"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="fr">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal"
        ></el-pagination>
      </div>
    </div>

    <!-- 新增 -->
    <el-dialog title="新增" :visible.sync="addFileDialog" :show-close="false" width="40%" :close-on-click-modal="false">
      <el-form ref="addFileForm" :model="addFileForm" label-position="left" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="addFileForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="上传文件" prop>
          <ImageUpload :fileList="fileList" :limit="1" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="addFileForm.remark" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" @click="submitFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, getComlistSave, getComlistUpdataStatus, getComlistDelete } from '@/api/app/fileLssued'
import ImageUpload from '@/components/file-upload'
import { downloadFiles } from '@/utils/util'
export default {
  components: {
    ImageUpload
  },
  data() {
    return {
      searchForm: {
        title: '',
        status: null,
        remark: ''
      },
      dataList: [],
      listLoading: false, // 列表加载loading
      currentPage: 1,
      pageSize: 10,
      listTotal: 0,
      fileList: [],
      addFileDialog: false,
      addFileForm: {
        title: '',
        remark: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //下载附件
    downloadFile(id) {
      let screenData = {
        comListId: id
      }
      downloadFiles('worker/comlist/download', screenData)
    },
    //删除
    async deleteFn(id) {
      let params = {
        id
      }
      await getComlistDelete(params)
      this.getList()
      this.$message.success('删除成功')
    },
    //修改状态
    async statusFn(value) {
      let params = {
        id: value.id,
        status: !value.status
      }
      await getComlistUpdataStatus(params)
      this.$message.success(value.status ? '已隐藏' : '已显示')
      this.getList()
    },
    //打开弹窗
    showDialog() {
      this.addFileDialog = true
    },
    //提交
    async submitFn() {
      let params = {
        file: this.fileList[0].url,
        title: this.addFileForm.title,
        remark: this.addFileForm.remark
      }
      await getComlistSave(params)
      this.getList()
      this.cancelDialog()
      this.$message.success('新增成功')
    },
    //取消弹窗
    async cancelDialog() {
      this.addFileDialog = false
      await this.$refs.addFileForm.resetFields()
      this.fileList = []
    },
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getList()
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    //获取列表数据
    async getList() {
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        remark: this.searchForm.remark,
        status: this.searchForm.status,
        title: this.searchForm.title
      }
      let { data } = await getList(params)
      console.log(data)
      this.dataList = data.records
      this.listTotal = data.total
    },
    //重置
    async emptyFn() {
      await this.$refs.searchForm.resetFields()
      this.searchFn()
    },
    //搜索
    searchFn() {
      this.currentPage = 1
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.tips {
  font-size: 14px;
  color: red;
  line-height: 32px;
  margin-left: 10px;
}
</style>
>
