<template>
  <!-- 入户安全 表单 -->
  <div class="card_safety">
    <div class="safety_left" v-if="operationType == 'edit'">
      <el-form ref="ruleForm" :model="ruleForm" label-width="70px" label-position="left">
        <el-form-item class="card_fuel_gas" label="整改后图片">
          <el-upload action="#" list-type="picture-card" :file-list="ruleForm.fileList" :http-request="UploadImage">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="ruleForm.state">
            <el-radio :label="item.label" v-for="(item,index) in rectificationState"
              :key="index">{{item.value}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div v-else class="safety_left card_exceed">
      <div v-for="(item,index) in formRuleList" :key="index">
        <div class="safety_input_item" v-if="item.type == 'input'">
          <div class="title_item" :style="{width:item.field == 'remark' ? '50px' : ''}">{{item.label}}</div>
          <div class="value_item">{{ruleForm[`${item.field}`]}}</div>
        </div>
        <div class="safety_item" v-else-if="item.type == 'image'">
          <div class="title_item_img">{{item.label}}</div>
          <div class="card_image_safety" v-if="item.options.length > 0">
            <div class="image_item" v-for="(kl,i) in item.options" :key="i">
              <el-image style="width: 100px; height: 100px" :src="$baseUrl + kl" :preview-src-list="[$baseUrl + kl]"
                fit="cover"></el-image>
            </div>
          </div>
          <div v-else class="empty">无</div>
        </div>
        <div class="safety_input_item" v-else-if="item.type == 'radio'">
          <div style="width:50px;font-size: 16px;">状态</div>
          <el-radio-group v-model="ruleForm[`${item.field}`]">
            <el-radio :label="ty.label" v-for="(ty,index1) in rectificationState" :key="index1">{{ty.value}}</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
    <div class="safety_right">
      <span>安全检查项目列表</span>
      <el-divider></el-divider>
      <div class="card_safety_checkEntry">
        <div class="checkEntry_item" v-for="(item1,index1) in checkEntry" :key="index1">
          <div class="label_title_safety">{{index1 + 1}}、{{item1.label}}</div>
          <div style="margin-left: 26px;">
            <el-radio-group v-model="item1.value">
              <el-radio label="0">合格</el-radio>
              <el-radio label="1">不合格</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getFileToken,
  } from '@/api/user'
  export default {
    name: 'formsSafety',
    props: {
      operationType: {
        type: String,
        default: () => '',
      },
      formRuleList: {
        type: Array,
        default: () => [],
      },
      // 安全检查项
      checkEntry: {
        type: Array,
        default: () => [],
      },
      ruleForm: {
        type: Object,
        default: () => {},
      }
    },
    data() {
      return {
        file: null,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        rectificationState: [{
          label: 0,
          value: '待整改',
        }, {
          label: 1,
          value: '整改中',
        }, {
          label: 2,
          value: '已整改',
        }, {
          label: -1,
          value: '合格',
        }],
      }
    },
    mounted() {

    },
    methods: {
      // 上传文件
      UploadImage(file) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.file = file.file;
        let formData = new FormData();
        formData.append('file', this.file);
        getFileToken(formData).then(res => {
          if (res.code == 200) {
            let arr1 = {
              uid: this.file.uid,
              url: '',
            }
            arr1.url = this.$baseUrl + res.data
            this.ruleForm.fileList.push(arr1)
          }
          loading.close();
        }).catch(e => {
          loading.close();
          this.$message.error('上传失败');
        })
      },
      // 删除
      handleRemove(file) {
        const filteredArr = this.ruleForm.fileList.filter(obj => obj.uid !== file.uid);
        this.ruleForm.fileList = filteredArr
        this.$forceUpdate()
      },
      // 查看
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
    background-color: #409EFF !important;
  }

  .card_safety {
    display: flex;
    margin-left: 10px;
  }

  .safety_left {
    width: 44%;
  }

  .safety_right {
    width: 56%;
    padding-left: 20px;
  }

  .card_fuel_gas {
    display: flex;
    flex-direction: column;
  }

  .card_fuel_gas ::v-deep .el-form-item__label {
    width: 150px !important;
    text-align: left;
    // margin-bottom: 20px;
  }

  .card_fuel_gas ::v-deep .el-form-item__content {
    margin-left: 0px !important;
  }

  .card_safety_checkEntry {
    max-height: 500px;
    overflow-y: auto;
  }

  .label_title_safety {
    font-size: 16px;
    margin-bottom: 5px;
  }

  .checkEntry_item {
    margin-bottom: 10px;
  }

  .safety_input_item {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
  }

  .safety_item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }

  .card_exceed {
    max-height: 600px;
    overflow-y: auto;
  }

  .title_item {
    font-size: 16px;
    width: 90px;
  }

  .card_image_safety {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }

  .image_item {
    margin-right: 10px;
  }

  .title_item_img {
    font-size: 16px;
  }

  .value_item {
    color: #fff;
    font-size: 14px;
  }

  .empty {
    color: #7f7f7f;
    margin: 20px 0px;
  }
</style>
