<template>
  <div class="app-container">
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="145px">
        <el-card class="box-card">
          <!-- 卡片头 -->
          <div slot="header" class="clearfix">
            <i class="el-icon-plus"/>
            <span>基本信息</span>
          </div>
          <!-- 卡片内容 -->
          <div>
            <el-row :gutter="2">
              <el-col :span="12">
                <el-form-item label="资产编号" prop="propNo">
                  <el-input disabled v-model="formData.property.propNo" placeholder="请输入资产编号"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="资产名称" prop="propName">
                  <el-input disabled v-model="formData.property.propName" placeholder="请输入资产名称"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="2">
              <el-col :span="12">
                <el-form-item label="资产状态" prop="propStatus">
                  <el-select disabled v-model="formData.property.propStatus" placeholder="请选择资产状态"
                             class="customerSelectWidth"
                  >
                    <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMPANY_PROP_STATUS)" :key="dict.value"
                               :label="dict.label" :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="上次维修/保养日期" prop="lastKeepDate">
                  <el-date-picker disabled clearable v-model="formData.property.lastKeepDate" type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="选择上次维修/保养日期"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="2">
              <el-col :span="12">
                <el-form-item label="维修/保养周期单位" prop="keepCycleType">
                  <el-select disabled v-model="formData.property.keepCycleType" placeholder="请选择维修/保养周期单位" clearable
                             class="customerSelectWidth"
                  >
                    <el-option v-for="dict in this.getDictDatas(DICT_TYPE.CYCLE_DICT)" :key="dict.value"
                               :label="dict.label" :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="维修/保养周期" prop="keepCycle">
                  <el-input disabled v-model="formData.property.keepCycle" placeholder="请输入维修/保养周期"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="2">
              <el-col :span="12">
                <el-form-item label="下次维修/保养日期" prop="nextKeepDate">
                  <el-date-picker disabled clearable v-model="formData.property.nextKeepDate" type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="选择下次维修/保养日期"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card class="box-card">
          <!-- 卡片头 -->
          <div slot="header" class="clearfix">
            <i class="el-icon-plus"/>
            <span>维修\保养记录</span>
          </div>
          <!-- 卡片内容 -->
          <div>
            <!-- 搜索工作栏 -->
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                     label-width="68px"
            >
              <el-form-item label="维修/保养日期" prop="keepDateArray" label-width="100">
                <el-date-picker v-model="queryParams.keepDateArray" style="width: 240px"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>

            <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
              <el-table-column label="序号" align="center" prop="num">
                <template slot-scope="scope">
          <span style="margin-left: 10px">{{
              queryParams.pageSize * (queryParams.pageNo - 1) + scope.$index + 1
            }}</span>
                </template>
              </el-table-column>
              <el-table-column label="维修/保养日期" align="center" prop="keepDate"/>
              <el-table-column label="备注" align="center" prop="remark"/>
              <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width"
                               width="200"
              >
                <template v-slot="scope">
                  <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row)"
                             v-hasPermi="['company:property-keep:query']"
                  >列表查看
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
                        :limit.sync="queryParams.pageSize"
                        @pagination="listPropertyKeep"
            />
          </div>
        </el-card>
      </el-form>
    </el-dialog>

    <el-drawer
      title="维修\保养记录详情"
      :with-header="false"
      :visible.sync="drawer"
      :direction="direction"
    >
      <div style="padding: 10px 0 0 10px">
        <el-descriptions class="margin-top" title="维修\保养记录详情" :column="1" border>
          <el-descriptions-item label="资产编号">{{ drawerDate.propNo }}</el-descriptions-item>
          <el-descriptions-item label="资产名称">{{ drawerDate.propName }}</el-descriptions-item>
          <el-descriptions-item label="资产状态">
            <dict-tag :type="DICT_TYPE.COMPANY_PROP_STATUS" :value="drawerDate.propStatus"/>
          </el-descriptions-item>
          <el-descriptions-item label="维修/保养周期单位">
            <dict-tag :type="DICT_TYPE.CYCLE_DICT" :value="drawerDate.keepCycleType"/>
          </el-descriptions-item>
          <el-descriptions-item label="维修/保养周期">{{ drawerDate.keepCycle }}</el-descriptions-item>
          <el-descriptions-item label="维修/保养日期">{{ drawerDate.keepDate }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ drawerDate.remark }}</el-descriptions-item>
          <el-descriptions-item label="附件">
            <el-card v-for="(file, index) in drawerDate.fileUrls" :key="index" style="margin-bottom: 10px">
              <div slot="header" class="clearfix">
                <i :class="getFileIcon(file.fileUrl)"></i>
                <span>{{ file.fileName }}</span>
              </div>
              <div>
                <a :href="file.fileUrl" download :title="file.fileName" target="_blank">
                  <el-button type="primary" size="small">
                    下载
                  </el-button>
                </a>
              </div>
            </el-card>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getPropertyKeepPage } from '@/api/company/property/propertykeep'

export default {
  name: 'PropertyKeepQuery',
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      // 遮罩层
      loading: true,
      // 弹出层标题
      dialogTitle: '查看维修\\保养记录',
      // 是否显示弹出层
      dialogVisible: false,
      // 显示搜索条件
      showSearch: true,
      // 导出遮罩层
      exportLoading: false,
      formData: {
        property: {
          id: undefined,
          propNo: undefined,
          propName: undefined,
          propStatus: undefined,
          lastKeepDate: undefined,
          nextKeepDate: undefined,
          keepCycleType: undefined,
          keepCycle: undefined
        }
      },
      // 表单校验
      formRules: {},
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      list: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        keepDateArray: [],
        propertyId: undefined
      },
      total: 0,
      drawerDate: {}
    }
  },
  methods: {
    /** 打开弹窗 */
    async open(row) {
      this.reset()
      this.resetQuery()
      await this.listPropertyKeep(row.id)
      this.formData.property = row
      this.drawerDate = {
        ...row,
        keepDate: undefined,
        remark: undefined,
        fileUrls: undefined
      }
      this.dialogVisible = true
    },
    /** 表单重置 */
    reset() {
      this.formData = {
        property: {
          id: undefined,
          propNo: undefined,
          propName: undefined,
          propStatus: undefined,
          lastKeepDate: undefined,
          nextKeepDate: undefined,
          keepCycleType: undefined,
          keepCycle: undefined
        }
      }
      this.resetForm('formRef')
    },
    // 获得记录
    async listPropertyKeep(id) {
      this.queryParams.propertyId = id
      const res = await getPropertyKeepPage(this.queryParams)
      this.list = res.data.records
      this.total = res.data.total
      this.loading = false
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.listPropertyKeep()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    openForm(row) {
      this.drawer = true
      this.drawerDate.keepDate = row.keepDate
      this.drawerDate.remark = row.remark
      this.drawerDate.fileUrls = row.fileUrls.split(',').map(item => {
        return {
          fileName: item.split('/').pop(),
          fileUrl: item
        }
      })
    },
    getFileIcon(url) {
      // 这个函数用于根据文件类型返回对应的图标类名
      const fileName = url.split('/').pop()
      const extension = fileName.split('.').pop().toLowerCase()
      switch (extension) {
        case 'doc':
        case 'docx':
          return 'el-icon-document'
        case 'xls':
        case 'xlsx':
          return 'el-icon-s-data'
        case 'pdf':
          return 'el-icon-document-checked'
        default:
          return 'el-icon-folder'
      }
    }
  }
}
</script>

<style scoped>

</style>
