<template>
    <basic-container style="max-height: 800px; overflow: hidden">
      <avue-crud
        :option="option"
        :table-loading="loading"
        :data="data"
        :page.sync="page"
        ref="crud"
        v-model="form"
        :permission="permissionList"
        :before-open="beforeOpen"
        :before-close="beforeClose"
        @search-change="searchChange"
        @search-reset="searchReset"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @on-load="onLoad"
      >
        <template slot-scope="{ row }" slot="deviceStatus">
          <el-tag
            size="small"
            :type="
              row.deviceStatus == 0
                ? 'warning'
                : row.deviceStatus == 1
                ? ''
                : ''
            "
          >
            {{
              row.deviceStatus == 0
                ? "待确认"
                : row.deviceStatus == 1
                ? "已确认"
                : ""
            }}
          </el-tag>
        </template>
        <template slot-scope="{ row }" slot="runingStatus">
          <el-tag
            size="small"
            :type="
              row.runingStatus == 0
                ? 'info'
                : row.runingStatus == 1
                ? 'success'
                : row.runingStatus == 2
                ? 'danger'
                : ''
            "
          >
            {{
              row.runingStatus == 0
                ? "关机"
                : row.runingStatus == 1
                ? "运行中"
                : row.runingStatus == 2 
                ? '报警中'
                : ""
            }}
          </el-tag>
        </template>
        <template slot-scope="scope" slot="menuLeft">
          <el-button
            size="small"
            @click="handleAdd"
            >新增</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="addOperation"
            >需求提报</el-button
          >
        </template>
        <template slot-scope="{ row }" slot="menu">
          <el-button @click="handleView(row)">查看</el-button>
          <el-button @click="handleEdit(row)">编辑</el-button>
          <el-button @click="handleDelete(row)">停用</el-button>
        </template>
      </avue-crud>
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        :append-to-body="true"
        width="50%"
      >
        <div style="height: 500px; overflow: auto">
          <el-form ref="form" :model="addForm" :rules="addRules" label-width="120px"  label-position="left">
            <div>
              <div
                style="
                  color: #101010;
                  font-size: 20px;
                  font-weight: 550;
                  margin-bottom: 20px;
                "
              >
                基本信息
              </div>
              <el-form-item label="设备编号" prop="deviceNo">
                <el-input placeholder="请输入设备编号" v-model="addForm.deviceNo"></el-input>
              </el-form-item>
              <el-form-item label="设备名称" prop="deviceName">
                <el-input placeholder="请输入设备名称" v-model="addForm.deviceName"></el-input>
              </el-form-item>
              <el-form-item label="型号" prop="deviceModel">
                <el-input placeholder="请输入型号" v-model="addForm.deviceModel"></el-input>
              </el-form-item>
              <el-form-item label="设备位置" prop="devicePosition">
                <el-input placeholder="请输入设备位置" v-model="addForm.devicePosition"></el-input>
              </el-form-item>
              <el-form-item  label="设备类型" prop="deviceType">
                <el-select style="width:100%;" placeholder="请选择设备类型" v-model="addForm.deviceType">
                  <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="供应商" prop="supplier">
                <el-input placeholder="请输入供应商" v-model="addForm.supplier"></el-input>
              </el-form-item>
              <el-form-item label="生产时间" prop="productTime">
                <el-date-picker
                  style="width:100%;"
                  v-model="addForm.productTime"
                  type="date"
                  placeholder="请选择生产时间">
                </el-date-picker>
              </el-form-item>
            </div>
            <div>
              <div
                style="
                  color: #101010;
                  font-size: 20px;
                  font-weight: 550;
                  margin-bottom: 20px;
                "
              >
                附件
              </div>
              <el-form-item label="附件名称" prop="fileName">
                <el-input placeholder="请输入附件名称" v-model="addForm.fileName"></el-input>
              </el-form-item>
              <el-form-item label="附件上传">
                  <!--  :limit="3" -->
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-success="handleSuccess"
                  :on-remove="handleRemove"
                  multiple
                  accept=".jpeg,.jpg,.png,.pdf"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">支持上传jpeg、jpg、pdf文件，且不超过10M</div>
                </el-upload>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">关 闭</el-button>
          <el-button @click="handleSave">保 存</el-button>
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </basic-container>
  </template>
  
  <script>
  export default {
    data(){
      return{
        option: {
          height: "auto",
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          dialogType: "dialog",
          dialogClickModal: false,
          addBtn: false,
          viewBtn: false,
          editBtn: false,
          delBtn: false,
          searchShowBtn: false,
          refreshBtn: false,
          columnBtn: false,
          menuWidth: 300,
          column: [
            {
              label: "巡检单号",
              labelWidth: 120,
              prop: "inspectionNo",
              overHidden: true,
            },
            {
              label: "单位名称",
              labelWidth: 120,
              prop: "unitName",
              search: true,
              overHidden: true,
            },
            {
              label: "巡检项目名称",
              labelWidth: 120,
              prop: "inspectionName",
              overHidden: true,
            },
            {
              label: "项目地址",
              labelWidth: 120,
              prop: "projectAddr",
              overHidden: true,
            },
            {
              label: "班组",
              labelWidth: 120,
              prop: "team",
              overHidden: true,
            },
            {
              label: "巡检计划开始时间",
              labelWidth: 120,
              prop: "startTime",
              overHidden: true,
            },
            {
              label: "巡检周期",
              labelWidth: 120,
              prop: "cycle",
              slot: true,
            },
            {
              label: "下次巡检日期",
              labelWidth: 120,
              prop: "nextDate",
            },
            {
              label: "状态",
              labelWidth: 120,
              prop: "status",
              slot: true,
              formslot: true,
            },
          ],
        },
        data: [],
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0,
        },
        dialogTitle:'设备新增',
        dialogVisible:false,
        addForm:{},
        addRules:{
          deviceNo:{required:true,message:'请输入设备编号',trigger:'blur'},
          deviceName:{required:true,message:'请输入设备名称',trigger:'blur'},
          deviceModel:{required:true,message:'请输入型号',trigger:'blur'},
          devicePosition:{required:true,message:'请输入设备位置',trigger:'blur'},
          deviceType:{required:true,message:'请选择设备类型',trigger:'blur'},
          supplier:{required:true,message:'请输入供应商',trigger:'blur'},
          productTime:{required:true,message:'请选择生产时间',trigger:'blur'},
          fileName:{required:true,message:'请输入附件名称',trigger:'blur'},
        },
        typeList:[
          {label:'类型一',value:'001'},
          {label:'类型二',value:'002'},
          {label:'类型三',value:'003'},
        ],
        fileList:[],
        requestVisible:false,
        requestForm:{}
      }
    },
    mounted(){},
    methods:{
      beforeOpen(done, type) {
        done();
      },
      beforeClose(done) {
        done();
      },
      searchReset(params, done) {
        //   params.releaseTimeRange = dateFormat(new Date(), 'yyyy-MM-dd');
        this.query = params;
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      addOperation(val){
        console.log('val================>',val && val.deviceNo)
        if(val && val.deviceNo){
          this.requestForm = {
            errPosition:val.devicePosition,
            deviceName:val.deviceName,
            errType:val.deviceType
          }
          this.requestVisible = true
        }else{
          this.requestVisible = true
        }
      },
      closeRequest(){
        this.requestVisible = false
      },
      // 点击新增按钮
      handleAdd(){
        this.dialogTitle = '设备新增'
        this.addForm = {}
        this.fileList = []
        this.$refs['form'].resetFields()
        this.dialogVisible = true
      },
      // 点击编辑按钮
      handleEdit(row){
        this.addForm = row
        this.fileList = row.fileList
        this.dialogTitle = '设备编辑'
        this.dialogVisible = true
      },
      // 点击删除按钮
      handleDelete(row){
        this.$confirm('请确认是否删除该设备?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '已取消删除'
            // });          
          });
      },
      // 点击新增弹窗关闭按钮
      handleClose(){
        this.dialogVisible = false
        this.addForm = {}
      },
      // 点击新增弹窗保存按钮
      handleSave(){
        this.$refs['form'].validate((valid) => {
          if(valid){
            if(this.fileList.length == 0){
              this.$message.error('请至少上传一个附件')
            }else{
  
            }
          }
        })
      },
      // 附件上传成功
      handleSuccess(response, file, fileList){
        console.log('response------------------>',response)
        console.log('file------------------>',file)
        console.log('fileList------------------>',fileList)
        this.fileList = []
        fileList.map(item =>{
          this.fileList.push({name:item.name})
        })
        console.log('fileList------------------>',this.fileList)
      },
      // 附件删除
      handleRemove(file, fileList){
        this.fileList = []
        fileList.map(item =>{
          this.fileList.push({name:item.name})
        })
      },
      onLoad(page, params = {}) {
        this.data = [
          {
            inspectionNo:'WX-20240820-01',
            unitName:'济南安池实验室',
            inspectionName:'实验室设备巡检',
            projectAddr:'济南市钢城区',
            deviceType:'通风与空调及净化系统',
            supplier:'山东烁今',
            productTime:'2024/8/20',
            deviceStatus:0, //设备状态 0-待确认 1-已确认
            runingStatus:1, //运行状态 0-关机 1-运行中 2-报警中
            fileName:'图纸',
            fileList:[
              {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, 
              {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
            ]
          },
        ];
        this.page.total = this.data.length
        this.loading = false;
      },
    }
  }
  </script>
  
  <style>
  
  </style>