<template>
  <div class="siteManage-main basic-info-page">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="130px"
      class="demo-ruleForm"
    >
      <el-row style="min-width: 1100px">
        <el-col :span="8" :gutter="20">
          <div class="grid-content bg-purple">
            <el-form-item label="站点名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="站点类型" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="用户公司" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item
              label="投运时间:"
              prop="planStartDate"
              style="margin-top: 0px"
            >
              <el-date-picker
                v-model="ruleForm.planStartDate"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="服务截止:" prop="planEndDate">
              <el-date-picker
                v-model="ruleForm.planEndDate"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="装机容量：" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="供电类型" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="单路"></el-radio>
                <el-radio label="双路"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="电压等级" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="站点地址" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="所属台区" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="站点坐标" prop="name">
              <el-input v-model="ruleForm.name">
                <i
                  :default-slot="suffix"
                  class="el-input__icon el-icon-location-outline"
                ></i>
              </el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8" :gutter="20">
          <el-form-item label="监察：" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择">
              <el-option label="监察1" value="1"></el-option>
              <el-option label="监察2" value="2"></el-option>
            </el-select>
          </el-form-item>

          <!-- <el-form-item label="联系方式" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item> -->
          <el-form-item label="折标准煤：" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>

          <el-form-item label="折标准煤：" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
              <el-radio label="电力（等价）"></el-radio>
              <el-radio label="电力（当量）"></el-radio>
            </el-radio-group>
            <div style="opacity: 0.45">0.000404吨标准煤/千瓦时</div>
          </el-form-item>

          <a class="goArchive">现场档案</a>

          <div class="blockTitle mt-60 mb-20">动态属性</div>
          <el-form-item label="故障动态：" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
              <el-option label="故障动态1" value="1"></el-option>
              <el-option label="故障动态2" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="实时负荷：" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
              <el-option label="实时负荷1" value="1"></el-option>
              <el-option label="实时负荷2" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="总用电量：" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
              <el-option label="总用电量1" value="1"></el-option>
              <el-option label="总用电量2" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="功率因数：" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
              <el-option label="选择1" value="1"></el-option>
              <el-option label="选择2" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" :gutter="20">
          <div class="grid-content bg-purple">
            <div class="grid-content bg-purple-light">
              <div class="blockTitle mb-20">站点照片</div>
              <el-form-item label="选择文件" prop="delivery">
                <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>

              <!-- <div class="blockTitle mt-40 mb-20">添加更多属性</div> -->
              <el-form-item label="联系人" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="联系方式" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
               <el-form-item label="联系人2" prop="spare_user_name">
                <el-input v-model="ruleForm.spare_user_name"></el-input>
              </el-form-item>
              <el-form-item label="联系方式2" prop="spare_phone">
                <el-input v-model="ruleForm.spare_phone"></el-input>
              </el-form-item>
            </div>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >保存</el-button
              >
              <el-button @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "BasicInfo",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        planStartTime: "",
        planEndTime: "",
      },
      rules: {
        planStartDate: [
          { required: true, message: "请选择开始日期", trigger: "change" },
        ],
        planEndDate: [
          { required: true, message: "请输入结束日期", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入站点名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
         spare_user_name: [
          { required: true, message: "请输入联系人2", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        spare_phone: [
          { required: true, message: "请输入联系方式2", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },
  methods: {
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped lang="scss">
</style>
