<template>
  <transition name="dialog-fade">
    <el-dialog
      v-if="showDialog"
      :title="dialogTitle"
      class="dialog-component"
      v-model="showDialog"
      width="640px"
      @close="closeDialog(0)"
    >
      <el-form
        ref="formInfo"
        :model="formInfo"
        class="demo-form-inline alarmStatusDialog"
        label-width="100px"
        :rules="rules"
      >
        <div class="topInfo underline">
          <el-form-item label="卡号：" prop="stationName">
            2021-09-14 14:53:28
          </el-form-item>
          <el-form-item label="告警历时：" prop="stationCode">
            3分钟
          </el-form-item>
          <el-form-item label="关联告警：" prop="stationAddress">
            2021-09-14 14:54:59
          </el-form-item>
          <div class="deviceTit">【测试站点主线】设备低压 复归:</div>
           <el-button type="success" class="lubo">故障录播</el-button>
           <div class="handleStatus">未处理</div>
        </div>

        <div class="basicTit">基本信息</div>

        <el-form-item label="站点名称：" prop="pointNum">
          测试站点1
        </el-form-item>
        <el-form-item label="台区展示：" prop="deviceNum">
          测试台区1
        </el-form-item>
        <el-form-item label="线路：" prop="deviceNum"> 进线二 </el-form-item>
        <el-form-item label="告警信息：" prop="deviceNum"> 低压 </el-form-item>
        <el-form-item label="告警状态：" prop="deviceNum"> 动作 </el-form-item>
        <el-form-item label="采集终端：" prop="deviceNum">
          DA00013433
        </el-form-item>
        <el-form-item label="站点地址：" prop="deviceNum">
          沪太路8786弄155号
        </el-form-item>
        <el-form-item label="联系人：" prop="deviceNum"> 张三 </el-form-item>
        <el-form-item label="联系方式：" prop="deviceNum">
          12345675223
        </el-form-item>

        <div class="basicTit">处理信息</div>

        <el-form-item label="处理内容" prop="handleCont" style="margin-bottom:20px">
          <el-input
            v-model="textarea"
            :rows="2"
            type="textarea"
            placeholder="Please input"
          />
        </el-form-item>

        <el-form-item label="现场照片" prop="deviceNum">
          <el-upload
                  action="#"
                  list-type="picture-card"
                  :auto-upload="false"
                  :limit="3"
                >
                <!-- slot="default" -->
                  <i  class="el-icon-plus"></i>
                  <!-- :default-slot="{ file }" -->
                  <div  >
                    <!-- <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 v-model="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
        </el-form-item>
        <br />
        <br />
        <br />
        <div style="text-align: right">
          <el-button @click="closeDialog(0)">取消</el-button>
          <el-button type="primary" @click="submitForm('formInfo')"
            >确定</el-button
          >
        </div>
      </el-form>
    </el-dialog>
  </transition>
</template>

<script>
export default {
  name: "DialogComponent",
  props: {
    dialogTitle: {
      type: String,
      default: "告警详情",
    },
    itemInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
       disabled: false,
      textarea: "请输入",
      showDialog: false,
      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
      options: [
        {
          value: "选项1",
          label: "站点一",
        },
        {
          value: "选项2",
          label: "站点二",
        },
        {
          value: "选项3",
          label: "站点三",
        },
        {
          value: "选项4",
          label: "站点四",
        },
        {
          value: "选项5",
          label: "站点五",
        },
      ],

      rules: {
      
        handleCont: [
          { required: true, message: "请输入处理内容", trigger: "blur" },
          { trigger: "blur" },
        ],
        unloadImg: [
          { required: true, message: "请上传图片", trigger: "blur" },
          { trigger: "blur" },
        ],
      },
    };
  },
  methods: {

     handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },


    roleValid(rule, value, callback) {
      if (value.length === 0) {
        callback(new Error("角色不能为空"));
      } else {
        callback();
      }
    },

    // onSelectedDrug(event) {
    //   this.siteList = event;
    //   console.log(this.siteList);
    // },
    // 保存操作
    submitForm(formName) {
      const params = Object.assign(this.formInfo, {});
      console.log(params)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 走保存请求
          this.$message({
            message: "操作成功！",
            type: "success",
          });
          this.closeDialog(1);
        } else {
          return false;
        }
      });
    },
    // 关闭弹框
    closeDialog(flag) {
      this.$refs["formInfo"].resetFields();
      this.showDialog = false;
      this.$emit("closeDialog", flag);
    },
  },
};
</script>
 
<style scoped lang="scss">
.el-input,
.el-select {
  width: 240px;
}

.el-form-item {
  margin-left: 0 !important;
}
</style>