<template>
  <!-- 工程管理页面 -->
  <div class="app-container">
    <!-- 表格 -->
    <TableModel
      :formLabel="formLabelTower"
      :columnsList="columnsListTower"
      :request-api="queryTowerListApi"
      :send-params="sendParams"
      ref="tableRef"
      @transIdList="getIdList"
      :show-sel="false"
      :show-right-tools="false"
    >
      <template slot="btn" slot-scope="{ queryParams }">
        <el-button type="primary" @click="handleAddTower()" icon="el-icon-plus" size="mini"
        >新增杆塔</el-button
        >
        <el-button
          @click="handleExportData(
            exportList,
            'base/tbProPower/export',
            '杆塔清单',
            queryParams
          )"
          icon="el-icon-upload2"
          size="mini"
        >导出数据</el-button
        >
        <el-button
          icon="el-icon-download"
          size="mini"
          @click="handleDownload(
            'base/tbProPower/downLoad',
            '杆塔模板',
            queryParams
          )"
        >数据模板下载</el-button
        >
        <el-upload
          :http-request="(obj) => uploadData(obj)"
          action="#"
          :file-list="fileList"
          :on-exceed="fileExceed"
          accept=".xls, .xlsx"
          :limit="1"
          style="display: flex"
        >
          <el-button
            style="height: 100%; margin-left: 6px"
            icon="el-icon-download"
            size="mini"
          >导入数据</el-button
          >
        </el-upload>
      </template>
      <template slot="handle" slot-scope="{ data }">
        <el-button
          type="primary"
          size="mini"
          @click="handleEditTower(data)"
        >编辑</el-button
        >
        <el-button
          type="danger"
          size="mini"
          @click="handleDeleteData(data.id, deleteTowerApi)"
        >删除</el-button
        >
      </template>
    </TableModel>

    <DialogModel
      :dialogConfig="dialogConfigTowerAdd"
      @closeDialogOuter="closeDialogTowerAddOuter"
    >
      <template slot="outerContent">
        <!-- 新增以及修改数据的表单组件 -->
        <TableTowerAdd
          :send-add-data="sendAddData"
          @closeAdd="closeAdd"
        >
        </TableTowerAdd>
      </template>
    </DialogModel>

  </div>
</template>

<script>
import {
  queryTowerListApi,
  deleteTowerApi,
  towerFileUpLoad
} from '@/api/base/proj'
import { formLabelTower, columnsListTower, dialogConfigTowerAdd } from '../config-tower'
import { commonMixin } from '../../mixins/common'
import TableTowerAdd from './table-tower-add.vue'
export default {
  name: 'tower',
  props: {
    sendData: {
      type: Object,
      default: () => null,
    },
  },
  methods: {
    queryTowerListApi,
    deleteTowerApi,
    handleAddTower() {
      this.sendAddData = {
        submitType: 'add',
        proId: this.sendData.id
      }
      this.dialogConfigTowerAdd.outerTitle = '新增杆塔'
      this.dialogConfigTowerAdd.outerVisible = true
    },
    handleEditTower(data) {
      data.submitType = 'edit'
      this.sendAddData = data
      this.dialogConfigTowerAdd.outerTitle = '修改杆塔'
      this.dialogConfigTowerAdd.outerVisible = true
    },
    closeAdd(type) {
      this.dialogConfigTowerAdd.outerVisible = false
      if(type) {
        this.$refs.tableRef.getTableList()
      }
    },
    closeDialogTowerAddOuter() {
      this.dialogConfigTowerAdd.outerVisible = false
    },
    getIdList(idList) {
      this.exportList = []
      idList.forEach(item => {
        this.exportList.push(item.id)
      })
    },
    /** 下载模板 */
    handleDownload(url, fileName, queryParams) {
      this.download(
        url,
        {
          ...queryParams
        },
        `${fileName}_${new Date().getTime()}.xlsx`,
      )
    },
    /** 上传图片/文件 */
    uploadData(param) {
      console.log(param, this.sendData)
      const formData = new FormData()
      formData.append('id', this.sendData.id)
      formData.append('file', param.file)
      towerFileUpLoad(formData).then(res => {
        if(res.code === 200) {
          this.$modal.msgSuccess('上传成功')
          this.$refs.tableRef.getTableList()
        }
      }).catch(err => {})
    },
    fileExceed() {
      this.$modal.msgError('最多上传1个文件！')
    },
  },
  mixins: [commonMixin],
  components: {
    TableTowerAdd
  },
  created() {
    this.sendParams = {
      id: this.sendData.id
    }
  },
  mounted() {
    console.log(this.sendData, '-----------')
  },
  data() {
    return {
      // 搜索区表单配置项
      formLabelTower,
      // 表格导出id列表
      exportList: [],
      // 列表区配置项
      columnsListTower,
      // 弹框区配置项
      dialogConfigTowerAdd,
      // 新建时弹框标题
      addDialogTitle: '新建项目部',
      // 修改时弹框标题
      editDialogTitle: '修改项目部',
      fileList: [],
      sendParams: undefined,
      sendAddData: undefined
    }
  },
}
</script>
