<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="operationStatus">
          <el-tag size="small" :type="row.operationStatus == 1 ? 'success' : row.operationStatus == 2 ? '' : row.operationStatus == 3 ? 'info' : ''">
            {{
              row.operationStatus == 1 ? '待接单' : row.operationStatus == 2 ? '维修完成' : row.operationStatus == 3 ? '已完成' : ''
            }}
          </el-tag>
      </template>
      <template slot-scope="{type,disabled}" slot="operationStatusForm">
        <div v-if="type == 'view'">
          <el-tag size="small" :type="form.operationStatus == 1 ? 'success' : form.operationStatus == 2 ? '' : form.operationStatus == 3 ? 'info' : ''">
            {{
              form.operationStatus == 1 ? '待接单' : form.operationStatus == 2 ? '维修完成' : form.operationStatus == 3 ? '已完成' : ''
            }}
          </el-tag>
        </div>
      </template>
      <template slot-scope="{type,disabled}" slot="errorVideoForm">
        <div v-if="type == 'view'">
          <video :src="form.errorVideo" muted  autoplay style="width:200px;height:200px;"></video>
        </div>
      </template>
      <template slot-scope="{type,disabled}" slot="errorImgForm">
        <div v-if="type == 'view'">
          <!-- {{from.errorImg}} -->
          <img v-for="item in form.errorImg" :key="item" :src="item" alt="" style="width:180px;height:180px;margin:0 5px;">
        </div>
      </template>
      <template slot-scope="scope" slot="menuLeft">
        <el-button type="primary" icon="el-icon-plus" size="small" @click="addOperation">需求提报</el-button>
      </template>
      <template slot-scope="{row}" slot="menu">
        <el-button @click="$refs.crud.rowView(row,index)">查看</el-button>
        <el-button @click="handleEdit(row)">编辑</el-button>
        <el-button @click="handleEvaluate(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;">
        <div v-for="(item,index) in addForm" :key="item" >
          <div style="width: 98%;
            height: 30px;
            line-height: 30px;
            padding-left: 5px;
            border-left: 5px solid #000;
            font-size: 18px;
            font-weight: 550;
            color: #000;
            margin: 0px 0 20px;" v-show="addForm.length > 1">填报{{index + 1}}</div>
          <el-form ref="form" :model="item.form" label-width="100px">
            <el-form-item label="故障位置">
              <el-input placeholder="请输入故障位置" v-model="item.form.errPosition"></el-input>
            </el-form-item>
            <el-form-item label="设备名称">
              <el-select placeholder="请选择设备名称" v-model="item.form.deviceName" style="width:100%;">
                <el-option v-for="item in deviceList" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="故障专业类型">
              <el-select placeholder="请选择故障专业类型" v-model="item.form.errType" style="width:100%;">
                <el-option v-for="item in errorList" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="故障现象描述">
              <el-input placeholder="请输入故障现象描述" type="textarea" v-model="item.form.errDescirb"></el-input>
            </el-form-item>
            <el-form-item label="故障视频">
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                accept=".mp4"
                :on-success="handleSuccess">
                  <i slot="default" class="el-icon-plus"></i>
              </el-upload>
              <video></video>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleAdd">新 增</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="handleSave">保 存</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
   </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
import { dateFormat } from "../../util/date";

export default {
  data() {
    return {
      showPrint: false,
      dialogTitle:'需求填报',
      dialogVisible:true,
      uploadUrl:'',
      form: {},
      addForm:[
        {form:{}},
        {form:{}},
      ],
      query: {},
      loading: true,
      parentId: 0,
      direction: 'rtl',
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      deviceList:[
        {label:'设备一',value:'001'},
        {label:'设备二',value:'002'},
        {label:'设备三',value:'003'},
        {label:'设备四',value:'004'},
      ],
      errorList:[
        {label:'类别一',value:'01'},
        {label:'类别二',value:'02'},
        {label:'类别三',value:'03'},
        {label:'类别四',value:'04'},
      ],
      isRegister: false,
      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:320,
        column: [
          {
            label: "提报时间",
            prop: "addTime",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            search: true,
            hide: true,
            viewDisplay: false,
            searchValue: dateFormat(new Date(), 'yyyy-MM-dd'),
            searchClearable: false,
          },
          {
            label: "需求单号",
            labelWidth:120,
            prop: "operationNo",
            overHidden:true,
          },
          {
            label: "设备名称",
            labelWidth:120,
            prop: "deviceName",
            overHidden:true,
          },
          {
            label: "故障位置",
            labelWidth:120,
            prop: "errPosition",
            type: "select",
            overHidden:true,
            // hide: true,
            search: true,
            // viewDisplay: false,
            // dicUrl: '/api/blade-system/dict-biz/get-hc-project',
            props: {
              label: 'dictValue',
              value: 'dictValue'
            },
          },
          {
            label: "故障专业类型",
            labelWidth:120,
            prop: "errType",
            overHidden:true,
            type: "select",
            searchLabelWidth: 100,
            hide: true,
            search: true,
            viewDisplay: false,
            // dicUrl: '/api/blade-system/dict-biz/get-hc-project',
            props: {
              label: 'dictValue',
              value: 'dictValue'
            },
          },
          {
            label:'故障现象描述',
            labelWidth:120,
            prop:'errDescirb',
            overHidden:true,
            slot: true
          },
          {
            label: '故障视频',
            labelWidth:120,
            prop: 'errorVideo',
            // hide:true,
            // propsHttp: {
            //   res: 'data',
            //   url:'url',
            //   name:'name',
            //   home: 'https://www.w3school.com.cn'
            // },
            // action: 'https://api.avuejs.com/imgupload',
            // listType: 'picture-img',
            // formslot:true,
          },
          {
            label: '故障图片',
            labelWidth:120,
            prop: 'errorImg',
            type: 'upload',
            hide:true,
            formslot:true,
          },
          {
            label: "提报时间",
            labelWidth:120,
            prop: "operationDate",
            slot: true
          },
          {
            label: "状态",
            labelWidth:120,
            prop: "operationStatus",
            slot: true,
            formslot:true,
          },
          {
            label: "完成时间",
            labelWidth:120,
            prop: "finishDate",
            slot: true
          },
        ]
      },
      data: [],
      videoList:'',//上传成功的视频
    };
  },
  directives: {
    print
  },

  computed: {
    ...mapGetters(["userInfo", "permission", "systemTime"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.notice_add, false),
        viewBtn: this.vaildData(this.permission.notice_view, false),
        delBtn: this.vaildData(this.permission.notice_delete, false),
        editBtn: this.vaildData(this.permission.notice_edit, false)
      };
    },
  },
  created() {
  },
  mounted() {
    
  },
  methods: {
    // 需求提报
    addOperation(){
      this.dialogTitle = '需求填报'
      this.dialogVisible = true
    },
    // 视频上传成功
    handleSuccessVideo(response, file, fileList){
      console.log('response--------------->',response)
      console.log('file--------------->',file)
      console.log('fileList--------------->',fileList)

    },
    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();
    },
    closeDraw() {
      this.isRegister = false
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.data = [
        {operationNo:'WX-20240820-01',deviceName:'通风柜',errPosition:'一楼102室',errType:'暖通自控',errDescirb:'通风柜无风，不通风',operationDate:'2024-02-15',operationStatus:1,finishDate:'2024-02-26',
        errorVideo:'/i/movie.ogg',errorImg:['https://api.avuejs.com/imgview/1721789673575.jpg','https://api.avuejs.com/imgview/1721800386561.jpg']},
        {operationNo:'WX-20240820-01',deviceName:'通风柜',errPosition:'一楼102室',errType:'暖通自控',errDescirb:'通风柜无风，不通风',operationDate:'2024-02-15',operationStatus:2,finishDate:'2024-02-26',
        errorVideo:'https://api.avuejs.com/imgview/主动管控页面.mp4',errorImg:[]},
        {operationNo:'WX-20240820-01',deviceName:'通风柜',errPosition:'一楼102室',errType:'暖通自控',errDescirb:'通风柜无风，不通风',operationDate:'2024-02-15',operationStatus:3,finishDate:'2024-02-26',
        errorVideo:'https://api.avuejs.com/imgview/主动管控页面.mp4',errorImg:[]},
      ]
      this.loading = false;
    },
  }
};
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.el-drawer__wrapper {
  .register_box {
    width: 800px !important;
    // padding: 0 40px;

    .title_box {
      // padding: 0 40px;
      // margin-top: 40px;

      .title_txt {
        display: flex;
        height: 30px;
        align-items: center;
        justify-content: space-between;

        .txt {
          color: rgba(0, 0, 0, .85);
          font-weight: 500;
          line-height: 24px;

        }

        .img_box {
          img {
            width: 30px;
            height: 30px;
          }
        }
      }

      .sub_txt {
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
      }
    }

    .tip_box {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 60px 0 20px 0;

      .img {
        width: 30px;
        height: 30px;
      }

      .tip_txt {
        font-size: 24px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #00B578;
        margin-left: 10px;
      }

      .fail_txt {
        color: #F93A4A;
      }

      .warn_txt {
        color: #FF6010;
      }
    }

    .tips_txt {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #F93A4A;
    }

    .tips_warn {
      color: #FF6010;
    }

    .fail_tip {
      color: #FF6010;
    }

    .account_mess {
      .mess_tit {
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        margin: 40px 0 20px 0;
      }

      .mess_box {
        width: 100%;
        min-height: 123px;
        background: #F5F6FA;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left_box {
          width: 25%;
          margin-left: 30px;

          .acc_text {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #999999;
            margin-bottom: 14px;
          }

          .acc_txt {
            font-size: 16px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #00B578;
          }
        }

        .fail_box {
          .acc_txt {
            color: #333333;
          }
        }

        .warn_box {
          .acc_txt {
            color: #333333;
          }
        }

        .right_box {
          display: flex;
          width: 75%;
          align-items: center;
          justify-content: space-between;

          .acc_box {
            .acc_text {
              font-size: 14px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              margin-bottom: 14px;
            }

            .acc_txt {
              font-size: 16px;
              font-family: Microsoft YaHei-Bold, Microsoft YaHei;
              font-weight: bold;
              color: #00B578;
            }
          }
        }

        .fail_right {
          .acc_box {
            .acc_txt {
              color: #333333;
            }
          }
        }

        .warn_right {
          .acc_box {
            .acc_txt {
              color: #333333;
            }
          }
        }
      }

      .reg_box {
        justify-content: start;

        .left_box {
          .acc_txt {
            color: #333333;
          }
        }

        .right_box {
          .acc_box {
            .acc_txt {
              color: #333333;
            }

            .acc_warn {
              color: #FF6010;
            }
          }
        }

      }
    }

    .btn {
      width: 151px;
      height: 50px;
      background: #1677FF;
      border-radius: 2px 2px 2px 2px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      cursor: pointer;
      margin-top: 50px;

    }
  }

  .prin_table table tr td {
    padding: 4px 0;
  }
}
</style>
