<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="showFormDia"
      width="85%"
      :before-close="handleClose"
      custom-class="bbsl-location-dialog"
      top="1.7vh"
    >
      <el-tabs v-model="activeName">
        <div class="bbsl-scroll-pane">
          <el-form
            ref="formInfo"
            :rules="rules"
            :model="params"
            label-width="150px"
            style="width:100%"
            class="bbsl-scroll-form"
          >
            <p class="from-title" id="step1">
              <i class="el-icon-info"></i>
              <span>基础信息</span>
            </p>
            <el-row>
              <el-col :span="8">
                <el-form-item label="预案标题:" prop="planTitle">
                  <el-input size="mini" placeholder="请输入预案标题" v-model="params.planTitle"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="行政区划：" prop="addvcd">
                  <el-cascader
				  filterable
                    :show-all-levels="false"
                    style="width: 100%"
					size="mini"
                    :options="basAdNames"
                    v-model="params.addvcd"
                    :props="{
                    value: 'code',
                    label: 'name',
                    children: 'children',
                }"
                    @change="onhouChange"
                    placeholder="请选择所属行政区划"
                    clearable
                  ></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="编制单位：" prop="weaveCompany">
                  <el-input
                    size="mini"
                    placeholder="请输入编制单位"
                    v-model="params.weaveCompany"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
        
              
            <el-col :span="8">
				<el-form-item label="编制时间：" prop="weaveDate">
				    <el-date-picker style="width: 100%" value-format="yyyy-MM-dd" size="mini"
						v-model="params.weaveDate" type="date" placeholder="选择编制时间">
							</el-date-picker>
				</el-form-item>
			</el-col>

              <el-col :span="8">
                <el-form-item label="批复单位：" prop="approvalCompany">
                  <el-input
                    
                    size="mini"
                    placeholder="请输入批复单位"
                    v-model="params.approvalCompany"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
				<el-form-item label="批复时间：" prop="approvalDate">
				    <el-date-picker style="width: 100%" value-format="yyyy-MM-dd" size="mini"
						v-model="params.approvalDate" type="date" placeholder="选择批复时间">
							</el-date-picker>
				</el-form-item>
			</el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
						<el-form-item label="上传文件：">
							<el-upload name="img" class="avatar-uploader" :action="uploadUrl"
								:on-success="uploadSuccess" :before-upload="beforeUpload" :headers="header"
								 :accept="accept" :file-list="fileList">
								<el-button icon="el-icon-upload" type="success">上传</el-button>
							</el-upload>
                            </el-form-item>
                            </el-col>
            </el-row>
                
            <el-form-item label="预案摘要：" prop="planAbstract">
              <el-input
                type="textarea"
                :autosize="{minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="params.planAbstract"
              ></el-input>
            </el-form-item>
           
          </el-form>
        </div>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="goInfo">保 存</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ShPlanManage_manage from '@/api/ShPlanManage.js'
import req from '@/request.js'
import {
		mapState
	} from 'vuex'
import latitude from '@/mixins/latitude'
export default {
  name: 'damForm-dialog',
  props: {
    showFormDia: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    pId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeName: 'from',
      uploadUrl: window.context.portal + '/file/v1/upload', // 服务器上传地址
		accept: '.pdf',
		fileList: [],      
      params: {
        planTitle: null, //预案标题
        weaveCompany: null, //编制单位
        addvcd: null, //行政区划
        weaveDate: null, //编制时间
        approvalCompany: null, //批复单位
        approvalDate: null, //批复时间
        planAbstract: null, //备注
        addvcdName:null,//行政区名称
      },
      basAdNames: [], //行政区划
      rules: {
        planTitle: [
          {
            required: true,
            message: '请输入预案标题',
            trigger: 'blur'
          }
        ],
        addvcd: [{required: true, message: '请选择行政区划', trigger: 'blur'}],

      }
    }
  },
  created() {
    this.getDetailInfo()
      ShPlanManage_manage.getbasAdName({}, res => {
      this.basAdNames = res.value
    })
  },
  computed: mapState({
			header: (state) => {
				return {
					Authorization: `Bearer ${state.login.currentUser.token}`
				}
			},
		}),
  methods: {
      beforeUpload(file) {
				return true
			},
			uploadSuccess(res) {
				if (res) {
					this.params.filePaths = res.fileId
				} else {
					// 提示信息，需引入Message
					this.$message.error('上传失败！')
				}
			},
    onhouChange(val) {
      if (val) {
        this.params.addvcd = val[val.length-1]
              for (let index = 0; index < this.basAdNames[0].children[0].children.length; index++) {
              if (this.params.addvcd==this.basAdNames[0].children[0].children[index].id) {
                  this.params.addvcdName=this.basAdNames[0].children[0].children[index].name
              }
             
          } 
      }
    },

    // 根据ID查询
    getDetailInfo() {
      if (this.title === '修改') {
       ShPlanManage_manage.detailId(this.pId, res => {
          this.params = res.value
          this.$set(this.params)
          if (res.value.filePaths) {
			this.fileList = [{
			name: res.value.filePaths,
			url: this.previewUrl + res.value.filePaths
							}]
							}
        })
      }
    },
    handleClose() {
      this.params = {
        planTitle: null, //预案标题
        weaveCompany: null, //编制单位
        addvcd: null, //行政区华
        weaveDate: null, //编制时间
        approvalCompany: null, //批复单位
        approvalDate: null, //批复时间
        planAbstract: null, //备注
        addvcdName:null,//行政区名称
      
      }
      this.$emit('closeFormDiao')
    },
    goInfo(e) {
      this.$refs.formInfo.validate(valid => {
        if (valid) {
          if (this.title === '新增') {
           ShPlanManage_manage.addSave(this.params, response => {
              if (response.state) {
                this.$notify({
                  type: 'success',
                  message: '新增成功',
                  duration: 2000
                  // offset: 80
                })
                this.$emit('closeFormDiao')
                this.$emit('refList')
              } else {
              }
            })
          }
          if (this.title === '修改') {
           ShPlanManage_manage.upData(this.params, response => {
              if (response.state) {
                this.$notify({
                  type: 'success',
                  message: '修改成功',
                  duration: 2000
                  // offset: 80
                })
                this.$emit('closeFormDiao')
                this.$emit('refList')
              } else {
              }
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-divider--horizontal {
  margin: 24px 0 5px 0;
  height: 7px !important;
  background: #88b4dd !important;
  .el-divider__text {
    font-size: 16px !important;
  }
}
// ::v-deep .el-input__inner {
//   border: 1px solid orange;
// }
// ::v-deep .el-textarea__inner {
//   border: 1px solid orange;
// }
</style>
