<template>
  <div>
    <SearchBox ref="SearchBoxRef" formName="search" :formData="query" @PopupNo="PopupNo" @reset="reset"></SearchBox>

    <ButtonBar @search="handleSearch" @add="handleAdd" @remove="handleRemoveBatch" @edit="handleEditBatch"
      @upload="handleUpload" @download="handleDownload" @import="handleImport" @export="handleExport"></ButtonBar>
      
    <el-card :body-style="cardBodyStyle">
      <el-table :data="tableData" border highlight-current-row @selection-change="handleSelectionChange" height="63vh">
        <el-table-column type="selection" fixed></el-table-column>
        <el-table-column type="index" label="序号" align="center" width="60">
          <template #default="scope">
            <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="true" prop="cmpNm" label="公司名称" header-align="center" align="center"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="contTy" label="合同类型" header-align="center" align="center"
          show-overflow-tooltip>
          <template #default="{ row }">
            {{ dicList.CONTRACT_TYPE.find(item => item.dicCode === row.contTy)?.dicName }}
          </template>
        </el-table-column>
        <el-table-column v-if="true" prop="tempNm" label="模板名称" header-align="center" align="center"
          show-overflow-tooltip>
        </el-table-column>


        <el-table-column label="操作" header-align="center" align="center" width="300px">
          <template #default="scope">
            <el-button plain type="warning" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button plain type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card :body-style="cardBodyStyle">
      <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
        background="background" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>

    <el-dialog :close-on-click-modal="false" draggable :title="title" v-model="dialogVisible" width="350px" top="5vh"
      @open="openDialog">
      <el-form :model="form" label-width="80px" label-position="right" inline ref="ruleFormRef" :rules="rules">
        <el-form-item label="公司名称" prop="cmpNm">
          <el-input v-model="form.cmpNm" clearable style="width: 200px" disabled></el-input>
        </el-form-item>
        <el-form-item label="合同类型" prop="contTy">
          <el-select v-model="form.contTy" placeholder="请选择" clearable style="width: 200px">
            <el-option v-for="item in dicList.CONTRACT_TYPE" :key="item.dicCode" :label="item.dicName"
              :value="item.dicCode" />
          </el-select>
        </el-form-item>
        <el-form-item label="模板名称" prop="tempNm">
          <el-input v-model="form.tempNm" clearable style="width: 200px"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button plain type="success" @click="handleSave(ruleFormRef)">保存</el-button>
          <el-button plain  type="danger" @click="handleCancelSave">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" draggable title="附件" v-model="dialogVisibleAttachment" width="1200px"
      top="5vh" @open="openDialog">
      <template #header>
        <div style="font-size: 20px; color: slategray; text-align: center; width: 100%;">文件上传</div>
      </template>
      <Attachment ref="AttachmentRefManual" :fId="fId"></Attachment>
    </el-dialog>

    <ImportExcel ref="ImportExcelRef" :url="importUrl" :formData="formData" @importSuccess="importSuccess">
    </ImportExcel>
  </div>
</template>

<script setup>
import ButtonBar from '@/components/ButtonBar.vue'
import SearchBox from "@/components/SearchBox.vue";
import Attachment from '@/components/Attachment.vue'
import ImportExcel from '@/components/ImportExcel.vue'

import {
  ref,
  reactive,
  onMounted,
  getCurrentInstance
} from 'vue'

const {
  proxy
} = getCurrentInstance()

import tools from '@/tools'
const cardBodyStyle = ref(tools.style.card)
const inputStyle = ref(tools.style.input)
const SearchBoxRef = ref(null)
const ImportExcelRef = ref(null)

onMounted(() => {
  handleSearch()
  getDictList()
})



/**
 * 查询公司代码
 */
const userId = window.localStorage.getItem('userId')
const userCode = window.localStorage.getItem('userCode')
const userName = window.localStorage.getItem('userDesc')
const dept = JSON.parse(window.localStorage.getItem('dept'))
const deptTree = JSON.parse(window.localStorage.getItem('deptTree'))
/**
 * 查询公司代码
 */


/**
 *  查询字典
 */
const dicList = ref({})
const getDictList = () => {
  var url = 'framework/Common/querySelectorList'
  var param = {
    type: JSON.stringify(['CONTRACT_TYPE'])
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      dicList.value = response.data.data
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}
/**
 *  查询字典
 */


/**
 * 重置查询条件
 */
const reset = () => {
  Object.keys(query.value).map(key => {
    query.value[key] = ''
  })
}

/**
 *   查询
 */
const query = ref({
  contTy: '',
  tempNm: ''
})
const tableData = ref([])
const handleSearch = () => {
  currentPage.value = 1
  getTableData()
}

const getTableData = () => {
  var url = 'cot/TmpHead/query'
  var param = {
    page: currentPage.value,
    rows: pageSize.value,
    params: JSON.stringify(query.value)
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      tableData.value = response.data.data.records
      totalRows.value = response.data.data.total
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}
/**
 *   查询
 */

/**
 * 分页
 */
const currentPage = ref(1)
const totalRows = ref(0)
const pageSizes = ref([5, 10, 20, 30, 40])
const pageSize = ref(10)
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getTableData()
}
/**
 * 分页
 */


/**
 * 新增
 */
const title = ref('新增')
const dialogVisible = ref(false)
const form = ref({
  cmpNm: '',
  contTy: '',
  cmpCd: '',
  tempNm: '',
  addId: '',
  addCode: '',
  addName: '',
  addDeptId: '',
  addDeptCode: '',
  addDeptName: '',
  addTime: '',
  modifyCode: '',
  modifyName: '',
})
const ruleFormRef = ref()
const rules = reactive({
  cmpNm: [{
    required: true,
    message: '请输入公司名称',
    trigger: 'change' | 'blur'
  }],
  contTy: [{
    required: true,
    message: '请输入合同类型',
    trigger: 'change' | 'blur'
  }],
  tempNm: [{
    required: true,
    message: '请输入模板名称',
    trigger: 'change' | 'blur'
  }]
})

const handleAdd = () => {
  if (window.localStorage.getItem('dept') == JSON.stringify(new Array())) {
    ElMessage({
      type: 'warning',
      message: '请添加登录人所在公司'
    })
    return
  }

  form.value = {
    cmpCd: deptTree[0].deptCode,
    cmpNm: deptTree[0].deptName,
    contTy: '',
    tempNm: '',
    addId: userId,
    addCode: userCode,
    addName: userName,
    addDeptId: dept[0].id,
    addDeptCode: dept[0].deptCode,
    addDeptName: dept[0].deptName,
    addTime: '',
    modifyCode: '',
    modifyName: '',
  }

  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields()
  }

  title.value = '新增'
  dialogVisible.value = true
}
/**
 * 新增
 */


/**
 * 保存、修改、删除
 */

const openDialog = () => {
}

const handleSave = (ruleFormRef) => {
  ruleFormRef.validate((valid, fields) => {
    if (valid) {
      var url = 'cot/TmpHead/save'
      var param = {
        json: JSON.stringify(form.value),
      }
      proxy.$axios.post(url, param).then(response => {
        if (response.data.code == 0) {
          form.value = response.data.data
          ElMessage({
            message: '保存成功',
            type: 'success',
          })
          getTableData()
          dialogVisible.value = false
        } else {
          // ElMessage.error('操作失败！' + response.data.msg)
          ElMessage({
            message: '操作失败' + response.data.msg,
            type: 'error'
          })
        }
      })

    } else {
      console.log('error submit!', fields)
    }
  })
}
const handleCancelSave = () => {
  dialogVisible.value = false
}
const handleEdit = (row) => {
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields()
  }
  
  title.value = '编辑'
  form.value = { ...row }
  form.value.modifyCode = userCode
  form.value.modifyName = userName
  dialogVisible.value = true
}
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '确定删除本条记录?',
    '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  }
  )
    .then(() => {
      var url = 'cot/TmpHead/remove'
      var param = {
        id: row.id
      }
      proxy.$axios.post(url, param).then(response => {
        if (response.data.code == 0) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          getTableData()
        } else {
          ElMessage({
            type: 'error',
            message: '删除失败' + response.data.msg
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

/**
 * 保存、修改、删除
 */

const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const handleRemoveBatch = () => {
  console.log('handleRemoveBatch')

  if (multipleSelection.value.length < 1) {
    ElMessage({
      type: 'warning',
      message: '请选择要删除的数据!'
    })
    return
  }

  ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    var ids = []
    multipleSelection.value.forEach((item, index) => {
      ids.push(item.id)
    })
    var url = 'cot/TmpHead/removeBatch'
    var param = {
      ids: JSON.stringify(ids)
    }
    proxy.$axios.post(url, param).then(response => {
      if (response.data.code == '0') {
        ElMessage({
          type: 'success',
          message: '操作成功!',
        });
        getTableData()
        dialogVisible.value = false
      } else {
        ElMessage({
          type: 'error',
          message: '操作失败!' + response.data.msg
        });
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    })
  })
}

const handleEditBatch = () => {
  console.log('handleEditBatch')
  if (multipleSelection.value.length != 1) {
    ElMessage({
      type: 'warning',
      message: '请选择一条数据编辑!'
    })
    return
  }
  handleEdit(multipleSelection.value[0])
}

const dialogVisibleAttachment = ref(false)
const fId = ref('')
const AttachmentRefAuto = ref(null)
const handleUpload = () => {
  if (multipleSelection.value.length != 1) {
    ElMessage({
      type: 'warning',
      message: '请选择一条数据上传文件!'
    })
    return
  }
  dialogVisibleAttachment.value = true
  fId.value = multipleSelection.value[0].id
  AttachmentRefAuto.value.upload()
}

const handleDownload = () => {
  console.log('handleDownload')
}

const importUrl = ref('cot/TmpHead/importExcel')
const formData = ref({
  fId: 'conTmpClause',
  userId: userId
})
const handleImport = () => {
  ImportExcelRef.value.open()
}
const importSuccess = () => {
  handleSearch()
}

const handleExport = () => {
  location.href = import.meta.env.VITE_BASE_API +
    '/cot/TmpHead/exportExcel?userId=' + userId + 
      '&menuId=' + localStorage.getItem('menuId') + 
      '&params=' + encodeURIComponent(JSON.stringify(query.value))
}

</script>

<style></style>