<!--模板管理-->
<template>
  <el-main class="bg_white wrap_box lcpg">
    <div
      style="display:flex;flex-direction: row;align-items: center;justify-content: space-between;margin:40px 0;margin-top: 20px;">
      <div style="display:flex;flex-direction: row;align-items: center;">
        <div>
          <label style="margin-right: 10px;">任务名称</label>
          <el-select v-model="data.task_id" placeholder="请选择" clearable>
            <el-option v-for="(it, index) in data.taskList" :key="index" :label="it.name"
              :value="it.basetask_id"></el-option>
          </el-select>
        </div>
        <div style="margin-left: 20px;">
          <label style="margin-right: 10px;">模板名称</label>
          <el-input v-model="data.name" placeholder="请输入模板名称"></el-input>
        </div>
      </div>
      <div class="d_bts">
        <div class="l-button" @click="search">搜索</div>
        <div class="l-button" @click="reset">重置</div>
      </div>
    </div>
    <!-- 模板列表 -->
    <div class="l-button" style="margin-bottom: 20px;" @click="data.reshow = true">上传文件 </div>
    <vxe-table id='ggdytable' ref="getDomN" resizable :scroll-x="{ enabled: false }" :row-config="{ isHover: true }"
      :scroll-y="{ enabled: false }" keepSource :custom-config="{ storage: true }" border show-overflow
      :data="data.mblist" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
      :column-config="{ resizable: true }" class="ggdycss" max-height="500">
      <vxe-column field="id" title="模板编号" width="100" align="center"> </vxe-column>
      <vxe-column field="task_name" title="所属任务" width="252" align="center"> </vxe-column>
      <vxe-column field="filename" title="文件名称" width="252" align="center"> </vxe-column>
      <vxe-column title="操作" width="200" align="center">
        <template #default="scoped">
          <span style="color:#409eff;cursor: pointer;" @click="setIt(scoped.row, scoped.rowIndex, 'xz')">下载</span>
          <span style="color:red;cursor: pointer;margin-left: 25px;"
            @click="setIt(scoped.row, scoped.rowIndex, 'sc')">删除</span>
        </template>
      </vxe-column>
      <vxe-column field="remark" title="备注" :edit-render="{ autofocus: '.vxe-input--inner' }" align="left">
        <template #edit="scope">
          <vxe-input v-model.trim="scope.row.remark" maxlenth='255' @blur="remarkblur(scope.row, scope.rowIndex)" />
        </template>
      </vxe-column>
    </vxe-table>
    <!-- 分页-->
    <div class="block">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="data.page" :page-sizes="[50, 100, 150]" :page-size="data.size"
        layout="total, sizes, prev, pager, next, jumper" :total="data.total">
      </el-pagination>
    </div>
    <el-dialog title="任务选择" :model-value="data.reshow" width="300px" :before-close="handleClose" :center="false">
      <div>
        <label style="margin-right: 10px;">所属任务</label>
        <el-select v-model="data.rwtask_id" placeholder="请先选择所属任务">
          <el-option v-for="(it, index) in data.taskList" :key="index" :label="it.name"
            :value="it.basetask_id"></el-option>
        </el-select>
        <el-upload ref="uploadRef" :file-list="data.fileListTableTop" class="upload-demo" :action="data.upLoadUrl"
          style="display: flex;flex-direction: row-reverse;" :show-file-list="false" :on-success="uploadAddRow"
          :on-change="fileListChange" :before-upload="beforeAvatarUpload" :limit="1"
          :with-credentials="data.withcredentials">
          <el-button size="small" type="primary" style="float: right;margin-top:20px;"
            :disable="!data.rwtask_id">确认上传</el-button>
        </el-upload>
      </div>
    </el-dialog>
  </el-main>
</template>
<script>
import { defineComponent, reactive, onMounted, getCurrentInstance, nextTick } from 'vue';
import { downloadzl } from "../../../utils/lc";
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'mbgl',
  setup (props, context) {
    const { proxy } = getCurrentInstance()
    const apiVersion = process.env.VUE_APP_API_VERSION.replace(/\./g, '_')
    const baseUrl = process.env.VUE_APP_API_BASEURL + apiVersion + '/'
    let data = reactive({
      withcredentials: true,
      mblist: [],
      reshow: false,
      rwtask_id: '',
      task_id: '',
      size: 50,
      page: 1,
      total: 0,
      fileListTableTop: [],
      upLoadUrl: baseUrl + 'project/upload/file',
      taskList: [],// 任务列表
    })
    onMounted(() => {
      proxy.$http.showLoading(false).get('project/data/base_task_data').then(res => {
        if (res.errno == 200) {
          data.taskList = res.data
          getPageInfo()
        }
      })
    })
    function getPageInfo () {
      proxy.$http.showLoading(false).get('project/filetemp/list', {
        page: data.page,
        size: data.size,
        task_id: data.task_id,
        name: data.name
      }).then(res => {
        if (res.errno == 200) {
          data.mblist = res.data.data
          data.total = res.data.total
        } else {
          ElMessage({
            type: 'error',
            message: res.errmsg
          })
        }
      })
    }
    function search () {
      data.page = 1
      getPageInfo()
    }
    function reset () {
      data.page = 1
      data.size = 50
      data.task_id = null
      data.name = ''
      getPageInfo()
    }
    //分页条数
    function handleSizeChange (val) {
      data.size = val
      getPageInfo()
    }
    //分页数
    function handleCurrentChange (val) {
      data.page = val
      getPageInfo()
    }
    //备注失去焦点事件
    function remarkblur (row, index) {
      proxy.$http.showLoading(false).post('project/filetemp/edit', {
        id: row.id,
        remark: data.mblist[index].remark
      }).then(res => {
        if (res.errno == 200) {

        } else {
          ElMessage({
            type: 'error',
            message: res.errmsg
          })
        }
      })
    }
    function setIt (item, index, type) {
      if (type == 'sc') {
        proxy.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          proxy.$http.showLoading(false).get('project/filetemp/del', {
            id: item.id
          }).then(res => {
            if (res.errno == 200) {
              proxy.$message.success(res.errmsg)
              data.page = 1
              getPageInfo()
            }
          }).catch(() => { })
        })
      }
      if (type == 'xz') {
        if (item.url) {
          downloadzl(item.url, item.filename)
          data.page = 1
          getPageInfo()
        }
      }
    }
    function fileListChange (value) {
    }
    function uploadAddRow (res, file) {
      data.loading = true
      if (res.status == 200) {
        proxy.$http.showLoading(false).post('project/filetemp/add', {
          base_task_id: data.rwtask_id,
          filename: res.data.filename,
          url: res.data.fileurl
        }).then(res => {
          if (res.errno == 200) {
            setTimeout(() => {
              data.loading = false
            }, 800)
            ElMessage({ type: 'success', message: res.errmsg })
            data.page = 1
            data.task_id = null
            getPageInfo()
            proxy.$refs.uploadRef.clearFiles()
            data.fileListTableTop = []
          } else {
            ElMessage({
              type: 'error',
              message: res.errmsg
            })
          }
        })
      } else {
        ElMessage({
          type: 'error',
          message: res.errmsg
        })
      }
      data.reshow = false
      proxy.$refs.uploadRef.clearFiles()
    }
    //文件校验方法
    function beforeAvatarUpload (file) {
      if (data.rwtask_id) {
        // 通过split方法和fileArr方法获取到文件的后缀名
        //不能导入大小超过2Mb的文件
        if (file.size > 20 * 1024 * 1024) {
          ElMessage({ type: 'error', message: '文件过大，请上传小于20MB的文件!' })
          return false
        }
        return true
      } else {
        ElMessage({ type: 'error', message: '请先选择所属任务' })
        return false
      }
    }
    function handleClose () {
      data.reshow = false
    }
    return {
      data,
      getPageInfo,
      search,
      reset,
      handleSizeChange,
      handleCurrentChange,
      remarkblur,
      setIt,
      uploadAddRow,
      beforeAvatarUpload,
      handleClose,
      fileListChange
    }
  }
})
</script>
<style lang="scss" scoped>
@import '@/assets/style/lc.scss';
</style>