<template>
  <super-dialog
    v-model="dialogVisible"
    :title="title"
    width="600px"
    v-bind="$attrs"
    @close="$emit('close-dialog')"
    @closed="closed"
    @open="open"
    v-on="$listeners"
  >
    <div class="detail-box">
      <div class="detail-title">
        <el-form
          ref="addEditForm"
          :model="addEditForm"
          class="edit-add-form"
          label-position="right"
          label-width="180px"
          label-suffix="："
        >
          <el-form-item class="file-form-item" label="路段名称">
            <el-input v-model="roadInfo.name" disabled></el-input>
          </el-form-item>
          <el-form-item
            class="form-item"
            label="巡检任务图片离线上传"
            prop="xcUploadImage"
          >
            <el-radio-group v-model="addEditForm.xcUploadImage" size="medium">
              <el-radio-button :label="1">可以</el-radio-button>
              <el-radio-button :label="0">不可以</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            class="form-item"
            label="巡检任务离线打卡"
            prop="xcTempclock"
          >
            <el-radio-group v-model="addEditForm.xcTempClock" size="medium">
              <el-radio-button :label="1">可以</el-radio-button>
              <el-radio-button :label="0">不可以</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            class="form-item"
            label="外勤任务图片离线上传"
            prop="sjUploadImage"
          >
            <el-radio-group v-model="addEditForm.sjUploadImage" size="medium">
              <el-radio-button :label="1">可以</el-radio-button>
              <el-radio-button :label="0">不可以</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            class="form-item"
            label="救援任务图片离线上传"
            prop="jyuploadImage"
          >
            <el-radio-group v-model="addEditForm.jyUploadImage" size="medium">
              <el-radio-button :label="1">可以</el-radio-button>
              <el-radio-button :label="0">不可以</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div class="time"></div>
      <div class="detail-content"></div>
      <div class="detail-source-time"></div>
    </div>

    <template v-slot:footer>
      <el-button :loading="saveLoading" type="primary" @click="handleSave">
        {{ $t('domestic.save') }}
      </el-button>
      <el-button plain type="primary" @click="dialogVisible = false"
        >关闭
      </el-button>
    </template>
  </super-dialog>
</template>

<script>
import SuperDialog from '@/components/SuperDialog/index.vue'
import {
  getRoadConfig,
  updateRoadConfig,
} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/roadSectionInfo'

export default {
  name: 'DetailDialog',
  components: {SuperDialog},
  props: {
    isShowDetail: {
      default: false,
      type: Boolean,
    },
    roadInfo: {
      default() {
        return {}
      },
      type: Object,
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.isShowDetail
      },
      set(val) {
        this.$emit('update:isShowDetail', val)
      },
    },
  },
  data() {
    return {
      saveLoading: false, // 上传loading
      title: '巡检配置',
      addEditForm: {
        xcUploadImage: 0,
        xcTempClock: 0,
        sjUploadImage: 0,
        jyUploadImage: 0,
      },
      fileId: '',
    }
  },
  created() {},
  methods: {
    // 弹层打开
    open() {
      this.getData()
    },
    async getData() {
      try {
        const res = await getRoadConfig(this.roadInfo.id)
        if (res) {
          this.addEditForm = {...res}
        } else {
          this.addEditForm.id = this.roadInfo.id
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 弹层关闭
    closed() {
      this.addEditForm = {
        xcUploadImage: 0,
        xcTempClock: 0,
        sjUploadImage: 0,
        jyUploadImage: 0,
      }
      this.$refs.addEditForm.clearValidate()
    },
    handleSave() {
      this.$refs.addEditForm.validate(async (valid, object) => {
        if (!valid) {
          this.$message.warning(
            `有${
              Object.keys(object).length
            }个字段未通过校验，请正确填写表单内容。`
          )
        } else {
          try {
            const {state} = await updateRoadConfig(this.addEditForm)
            if (state) {
              this.$message.success(`保存成功`)
              this.dialogVisible = false
            }
          } finally {
            this.saveLoading = false
          }
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.detail-box {
  display: flex;
  flex-direction: column;
  row-gap: 12px;

  .detail-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
  }

  .time {
    color: #b4b4b4;
    font-size: 14px;
  }

  .detail-content {
    color: #fff;
    font-size: 16px;
    line-height: 30px;
    text-indent: 32px;
    margin: 10px 0 20px 0;
  }

  .detail-source-time {
    color: #fff;
    font-size: 16px;
  }
}
</style>
