<template>
  <div id="spdAdd">
    <div style="padding:0 0 30px 10px;" v-if="!control">
      <span>新增问题</span>
      <el-form :model="basicForm" :rules="basicRules" ref="basic" label-position="left" label-width="auto">
        <el-row :gutter="10">
          <el-col :span="23">
            <el-form-item label="所属医院:" prop="hospital">
              <el-select ref="select" size="mini" clearable filterable remote v-model="basicForm.hospital" :remote-method="remoteMethod"
               @hook:mounted="cancalReadOnly"
              @visible-change="cancalReadOnly" 
              placeholder="请输入关键词">
                <el-option
                  v-for="item in yyoptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="23">
            <el-form-item label="所属科室:" prop="department">
              <el-input size="mini" v-model="basicForm.department">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="23">
            <el-form-item label="所属人员:" prop="person">
              <el-input size="mini" v-model="basicForm.person">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="23">
            <el-form-item label="联系方式:" prop="contactInfo">
              <el-input size="mini" v-model="basicForm.contactInfo">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="23">
            <el-form-item label="问题分类:" prop="problemClassification">
              <el-select size="mini" v-model="basicForm.problemClassification" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="23">
            <el-form-item label="问题描述:" prop="problemDescription">
              <el-input type="textarea" :rows="4" size="mini" v-model="basicForm.problemDescription">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="23">
            <el-form-item label="问题图片:" prop="">
              <el-upload
                :action="uploadImgUrl"
                :headers="headers"
                :file-list="basicForm.problemPicture"
                list-type="picture"
                :on-success="successUpload"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div style="text-align: center;">
        <el-button style="width: 150px;" type="primary" size="mini" @click="submitForm('basic')">提 交</el-button>
      </div>
    </div>

    <Indexs @update-data="updateData" v-if="control"/>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { addQuestion } from "./api";
import { getRefer } from '@/api/purchase/basic'
export default {
  components: {
    Indexs: () => import("./index.vue"),
  },
  data() {
    return {
      control: true,
      basicForm: {
        hospital:'',
        department:'',
        person:'',
        contactInfo:'',
        problemClassification:'',
        problemDescription:'',
        problemPicture:[]
      },
      yyoptions: [],
      options: [
        {value: 1, label: '硬件问题'},
        {value: 2, label: '系统操作'},
        {value: 3, label: '服务问题'},
        {value: 4, label: '保供问题'},
        {value: 5, label: '其他'}
      ],
      basicRules:{
        hospital:[{required: true, message: '请选择所属医院', trigger: 'blur'}],
        department:[{required: true, message: '请填写科室', trigger: 'blur'}],
        person:[{required: true, message: '请填写人员', trigger: 'blur'}],
        contactInfo:[{required: true, message: '请填写联系方式', trigger: 'blur'}],
        problemDescription:[{required: true, message: '请填写问题描述', trigger: 'blur'}],
        problemClassification:[{required: true, message: '请选择问题分类', trigger: 'change'}],
      },
      dialogImageUrl: '',
      dialogVisible: false,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
    }
  },
  methods: {
    successUpload(resp, file, fileList) {
      console.log(fileList)
      this.basicForm.problemPicture = fileList.map((item) => {
        return item.url
      })
    },
    handleRemove(file, fileList) {
      console.log(fileList)
      this.basicForm.problemPicture = fileList.map((item) => {
        return item.url
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    remoteMethod(query) {
      console.log(query)
      if(query != '') {
        let params = {isPage: false, type: 'CUSTOMER_PARAM', name: '客户参照', search: query}
        getRefer(params).then(res => {
          if(res.code === 200) {
            this.yyoptions = res.rows
          }
        })
      } else {
        this.yyoptions = []
      }
    },
    submitForm(formName) {
      console.log(this.basicForm)
      this.$refs[formName].validate((valid) => {
        if(valid) {
          addQuestion(this.basicForm).then(res => {
            if (res.code === 200) {
              this.$modal.notifySuccess("新增成功");
              this.control = true
              this.basicForm = {
                hospital:'',
                department:'',
                person:'',
                contactInfo:'',
                problemClassification:'',
                problemDescription:'',
                problemPicture:[]
              }
            }
          }).catch(err => {

          })
        } else {
          return false
        }
      })
    },
    updateData(val) {
      this.control = val
    },
    cancalReadOnly(onOff) {
      this.$nextTick(() => {
        if (!onOff) {
          const { select } = this.$refs;
          const input = select.$el.querySelector('.el-input__inner');
          input.removeAttribute('readonly');
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>

</style>