<template>
  <a-modal :title="title" centered :width="1000" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk"
    @cancel="handleCancel" cancelText="关闭" :footer="false">
    <div class="form-box">
      <topTitle2 :title="description1"></topTitle2>
      <a-form-model :model="model" ref="ruleForm" :rules="rulesForm">
        <div class="type_line">
          <a-form-model-item label="项目标题" prop="title">
            <a-input v-model="model.title" :disabled="disableSubmit" placeholder="请输入项目标题" />
          </a-form-model-item>
        </div>
        <div class="type_line">
          <div class="half">
            <a-form-model-item label="项目编码">
              <a-input placeholder="自动生成" disabled />
            </a-form-model-item>
          </div>
        </div>
        <div class="type_line">
          <div class="half">
            <a-form-model-item label="发布日期" prop="releaseDate" class="time-ant">
              <!-- <a-date-picke show-time v-model="model.date10"></a-date-picke> -->
              <a-date-picker valueFormat="YYYY/MM/DD" :disabled="disableSubmit" :format="timeFormatList"
                v-model="model.releaseDate">
              </a-date-picker>
              <!-- <a-range-picker v-model="model.date10" :disabled="disableSubmit" /> -->
            </a-form-model-item>
          </div>
        </div>
        <div class="type_line">
          <div class="half">
            <a-form-model-item label="兑换时间段" prop="cashingStartDate2" class="time-ant">
              <a-range-picker valueFormat="YYYY/MM/DD" separator="-" :format="timeFormatList"
                v-model="model.cashingStartDate2" :disabled="disableSubmit" />
            </a-form-model-item>
          </div>
        </div>
        <div class="type_line">
          <div class="half">
            <a-form-model-item label="主管部门" prop="mainDeptCode">
              <a-input v-model="model.mainDeptCode" :disabled="disableSubmit" placeholder="请输入主管部门" />

              <!-- <a-select show-search :disabled="disableSubmit" v-model="model.date5" placeholder="请输入主管部门"
                :default-active-first-option="false" :show-arrow="false" :filter-option="false" :not-found-content="null">
                <a-select-option v-for="d in fildata" :key="d.value">
                  {{ d.text }}
                </a-select-option>
              </a-select> -->
            </a-form-model-item>
          </div>
        </div>
        <div class="type_line">
          <div class="half">
            <a-form-model-item label="政策依据" prop="policyId">
              <a-select v-model="model.policyId" :disabled="disableSubmit" :options="originalList" placeholder="请选择政策依据">
              </a-select>
            </a-form-model-item>
          </div>
        </div>
        <div class="type_line remake">
          <a-form-model-item label="原文要点">
            <!-- <a-textarea v-model="model.date156" :style="{ resize: 'none' }" :auto-size="{ minRows: 3, maxRows: 3 }"
              placeholder="请输入原文要点" :disabled="disableSubmit" />
            <span>{{ textLength }}</span> -->
            <el-input :rows="6" type="textarea" placeholder="请输入原文要点" v-model="model.originalTextGist" size="medium "
              :maxlength="500" show-word-limit :disabled="disableSubmit">
            </el-input>
          </a-form-model-item>
        </div>
        <div class="type_line">
          <div class="half">
            <a-form-model-item label="项目类型" prop="type">
              <j-dict-select-tag placeholder="请选择项目类型" dictCode="policy_type" :disabled="disableSubmit"
                v-model="model.type" />
            </a-form-model-item>
          </div>
        </div>
        <div class="type_line">
          <div class="half">
            <a-form-model-item label="免申即享类型" prop="freeEnjoyType">
              <j-dict-select-tag placeholder="请选择免申即享类型" dictCode="exemption_type" :disabled="disableSubmit"
                v-model="model.freeEnjoyType" />
            </a-form-model-item>
          </div>
        </div>
        <div class="type_line">
          <div class="half">
            <a-form-model-item label="区域" prop="addressCode">
              <a-tree-select :replaceFields="areaDataProps" :disabled="disableSubmit" treeNodeFilterProp="title"
                allow-clear show-search v-model="model.addressCode" style="width: 100%" @change="onChangeArea"
                :tree-data="areaData" search-placeholder="请输入区域关键字" />
            </a-form-model-item>
          </div>
        </div>
        <div class="type_line">
          <div class="half">
            <a-form-model-item label="金额">
              <a-input v-model="model.amount" :disabled="disableSubmit" placeholder="请输入金额（元）" />
            </a-form-model-item>
          </div>
        </div>
        <div class="type_line">
          <div class="half">
            <a-form-model-item label="联系人">
              <a-input v-model="model.contactPerson" :disabled="disableSubmit" placeholder="请输入联系人" />
            </a-form-model-item>
          </div>
        </div>
        <div class="type_line">
          <div class="half">
            <a-form-model-item label="咨询地址">
              <a-input v-model="model.consultingAddress" :disabled="disableSubmit" placeholder="请输入咨询地址" />
            </a-form-model-item>
          </div>
        </div>
        <div class="type_line">
          <div class="half">
            <a-form-model-item label="咨询电话">
              <a-input v-model="model.enquiryTelephone" :disabled="disableSubmit" placeholder="请输入咨询电话" />
            </a-form-model-item>
          </div>
        </div>
        <div class="type_line remake">
          <a-form-model-item label="兑付条件" prop="termsPayment">
            <el-input :rows="6" type="textarea" placeholder="请输入兑付条件" :disabled="disableSubmit"
              v-model="model.termsPayment" size="medium " :maxlength="500" show-word-limit>
            </el-input>
          </a-form-model-item>
        </div>
        <div class="type_line remake">
          <a-form-model-item label="兑现标准" prop="cashingStandard">
            <el-input :rows="6" type="textarea" placeholder="请输入兑现标准" :disabled="disableSubmit"
              v-model="model.cashingStandard" size="medium " :maxlength="500" show-word-limit>
            </el-input>
          </a-form-model-item>
        </div>
        <div class="type_line remake">
          <a-form-model-item label="兑现流程" prop="cashingProcess">
            <el-input :rows="6" type="textarea" placeholder="请输入兑现流程" :disabled="disableSubmit"
              v-model="model.cashingProcess" size="medium " :maxlength="500" show-word-limit>
            </el-input>
          </a-form-model-item>
        </div>
        <div class="type_line remake">
          <a-form-model-item label="项目内容">
            <j-editor placeholder="请输入正文" v-model="model.projectContent" :disabled="disableSubmit" />
            <!-- <a-textarea :auto-size="{ minRows: 2, maxRows: 4 }" placeholder="请输入备注" /> -->
          </a-form-model-item>
        </div>
        <a-divider v-if="disableSubmit" />
        <div v-if="disableSubmit">
          <div class="type_line">
            <div class="half">
              <a-form-model-item label="项目状态">
                <a-input v-model="model.statusCode" :disabled="disableSubmit" />
              </a-form-model-item>
            </div>

            <div class="half">
              <a-form-model-item label="创建时间">
                <a-input v-model="model.createTime" :disabled="disableSubmit" />
              </a-form-model-item>

            </div>
          </div>
          <div class="type_line">
            <div class="half" v-if="model.cashingStartDate">
              <a-form-model-item label="兑换时间段">
                <a-input v-model="model.cashingStartDate" :disabled="disableSubmit" />
              </a-form-model-item>
            </div>
            <div class="half">
              <a-form-model-item :label="model.status == 3 ? '发布时间' : '待发布时间'">
                <a-input v-model="model.releaseTime" :disabled="disableSubmit" />
              </a-form-model-item>
            </div>
          </div>
        </div>
      </a-form-model>
    </div>
    <div v-if="!disableSubmit" class="footer-box">
      <a-button type="primary" @click="handleOk(1)" class="searchBut">发布</a-button>
      <a-button type="primary" @click="handleOk(2)" class="searchBut" style="margin-left: 8px">暂存</a-button>
      <a-button @click="handleCancel" class="resetBut" style="margin-left: 8px">取消</a-button>
    </div>

    <a-modal :title="title2" centered :width="600" :visible="visible2" @ok="handleOk2" @cancel="handleCancel2"
      cancelText="关闭" :footer="false">
      <a-form-model :model="model2">
        <div class="type_line2">
          <a-form-model-item label="您可以在这设置定时发布" class="time-ant">
            <a-date-picker valueFormat="YYYY/MM/DD HH:mm:ss" :format="timeFormatList2" v-model="model2.releaseTime"
              show-time placeholder="请选择发布时间" @change="onChange" @ok="onOk" />
          </a-form-model-item>
        </div>
      </a-form-model>
      <div class="footer-box">
        <a-button type="primary" @click="handleOk2(1)" class="searchBut">保存</a-button>
        <a-button type="primary" @click="handleOk2(2)" class="searchBut" style="margin-left: 8px">立即发布</a-button>
        <a-button @click="handleCancel2" class="resetBut" style="margin-left: 8px">取消</a-button>
      </div>
    </a-modal>
  </a-modal>
</template>

<script>
// import pick from 'lodash.pick'
// import { validateDuplicateValue } from '@/utils/util'
import { httpAction, postAction, getAction } from '@/api/manage'
import JEditor from '@/components/jeecg/JEditor'
import JUpload from '@/components/jeecg/JUpload'
import topTitle2 from '@/views/components/topTitle2'
import tableDemo from './tableDemo'

export default {
  name: 'SysDataSourceModal',
  components: { JEditor, JUpload, topTitle2, tableDemo },
  data () {
    return {
      description1: '项目基本信息',
      title: '操作',
      title2: '确定要发布吗？',
      visible: false,
      visible2: false,
      model: {},
      model2: {},
      disableSubmit: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 },
      },
      confirmLoading: false,
      rulesForm: {
        title: [{ required: true, message: '请输入项目标题' }],
        releaseDate: [{ required: true, message: '请选择发布日期' }],
        cashingStartDate2: [{ required: true, message: '请选择兑换时间段' }],
        policyId: [{ required: true, message: '请选择政策依据' }],
        mainDeptCode: [{ required: true, message: '请输入主管部门' }],
        type: [{ required: true, message: '请选择项目类型' }],
        freeEnjoyType: [{ required: true, message: '请选择免申即享类型' }],
        addressCode: [{ required: true, message: '请选择区域' }],
        termsPayment: [{ required: true, message: '请输入兑付条件' }],
        cashingStandard: [{ required: true, message: '请输入兑现标准' }],
        cashingProcess: [{ required: true, message: '请输入兑现流程' }],
      },
      //发文部门列表
      fildata: [],
      //区域列表
      areaData: [],
      areaDataProps: {
        children: 'children',
        title: 'areaName',
        key: 'areaCode',
        value: 'areaCode'
      },
      // 政策原文列表
      originalList: [],
      url: {
        add: '/enjoy/hqFreeEnjoy/add',
        edit: '/enjoy/hqFreeEnjoy/edit',
      },
      timeFormatList: 'YYYY/MM/DD',
      timeFormatList2: 'YYYY/MM/DD HH:mm:ss',
    }
  },
  created () {
    this.getPolicyList()
  },
  computed: {
    textLength () {
      return (this.model.date156 || '').length
    },
  },
  methods: {
    add () {
      this.edit({})
    },
    edit (record) {
      // this.$refs.ruleForm.resetFields()
      this.model = Object.assign({}, record)
      if (this.model.cashingStartDate) {
        let arr = []
        arr[0] = this.model.cashingStartDate
        arr[1] = this.model.cashingDeadline

        this.model.cashingStartDate2 = arr
        // this.model.cashingStartDate2.push(this.model.cashingDeadline)
      }
      if (this.model.status) {
        this.model.statusCode = this.model.status == 3 ? '已发布' : this.model.status == 2 ? '待发布' : '暂存'
      }
      this.visible = true
    },
    close () {
      this.$emit('close')
      this.visible = false
    },
    handleOk (val) {
      // 触发表单验证
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.model.cashingStartDate2) {
            // console.log(this.model.cashingStartDate2);
            this.model.cashingStartDate = this.model.cashingStartDate2[0]
            this.model.cashingDeadline = this.model.cashingStartDate2[1]
          }
          this.model.mainDept = '主管1'
          this.model.addressName = '四川'  //目前写死的，等后续真数据
          if (val == 2) {
            this.model.status = 1
            this.save()
          } else {
            this.model2 = {}
            this.visible2 = true
          }
        } else {
          this.$message.warning('请完善表单数据')
        }
      })
    },
    //保存
    save () {
      this.confirmLoading = true
      let httpUrl = this.url.add,
        method = 'post'
      if (this.model.id) {
        httpUrl = this.url.edit
        method = 'put'
      }
      httpAction(httpUrl, this.model, method)
        .then((res) => {
          if (res.success) {
            this.$message.info('保存成功')
            this.$emit('ok')
            this.close()
          } else {
            this.$message.error('保存失败，请检查网络设置');
          }
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    handleCancel () {
      this.close()
    },
    handleOk2 (val) {
      // console.log(this.model2);
      if (val == 1) {
        if (!this.model2.releaseTime) {
          this.$message.info('请设置时间')
        } else {
          this.model.status = 2
          this.model.releaseTime = this.model2.releaseTime
          this.save()
          this.visible2 = false
          this.model2 = {}
        }
        // this.close()
      } else {
        this.model.status = 3
        this.save()
        this.visible2 = false
        this.model2 = {}
      }

    },
    handleCancel2 () {
      this.visible2 = false
    },
    //区域选择
    onChangeArea (value, label, extra) {
      // console.log(value, label, extra);
      this.model.addressName = label[0]

    },
    getPolicyList () {
      getAction("basic/hqPolicyContent/list/all").then(e => {
        if (e.code == 200) {
          // originalList  e.result
          this.originalList = e.result.map(item => {
            return {
              label: item.title,
              value: item.id
            }
          })
        }
      })
      getAction("gtSysArea/allList").then(e => {
        if (e.code == 200) {
          this.areaData = e.result
          // this.treeData = newArr
          // console.log(e);
        }
      })
    },
    //选择发布时间
    onOk (value) {
      console.log('onOk: ', value);
    },
    onChange (value, dateString) {
      console.log('Formatted Selected Time: ', dateString);
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/shaDow.less';

::v-deep .ant-modal-header {
  // border-bottom: none;
}

::v-deep .ant-modal-title {
  position: relative;
  padding-left: 48px;
  font-family: 'PingFangSC-Regular', 'PingFang SC';
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
}


::v-deep .ant-modal-title::before {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 24px;
  height: 25px;
  background-image: url(~@/assets/u2.png);
  background-size: 100% 100%;
}

::v-deep .ant-modal-footer {
  border-top: none;
  display: flex;
  justify-content: center;
}

.form-box {
  height: 600px;
  overflow-y: scroll;
  padding-right: 15px;
}

.cl-box {
  overflow: hidden;
}

.footer-box {
  display: flex;
  justify-content: end;
  margin-top: 10px;
}

.searchBut {
  border-radius: 2px;
  font-size: 14px;
  padding: 0 25px;
  line-height: 30px;
}

.resetBut {
  line-height: 30px;
  border-radius: 2px;
  font-size: 14px;
  padding: 0 25px;
}

.ant-input {
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  border-radius: 2px;
}

.type_line3 {
  display: flex;
  justify-content: end;
  margin-bottom: 10px;
  text-align: end;
}

.type_line2 {
  display: flex;

  ::v-deep .ant-form-item-label {
    width: 30%;
    line-height: 20px;
  }

  ::v-deep .ant-form-item-control-wrapper {
    width: 70%;
    // padding-left: 15px;
  }

  ::v-deep .ant-calendar-picker {
    min-width: 300px !important;

    .ant-input {
      border-radius: 2px;
      height: 38px;
      line-height: 38px;
    }
  }

  .ant-form-item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 18px;
  }

  // .ant-input {
  //   height: 38px;
  // }
}

.type_line {
  display: flex;

  .half {
    width: 50%;

    ::v-deep .ant-form-item-label {
      width: 26.5%;
      white-space: inherit;
    }

    ::v-deep .ant-form-item-control-wrapper {
      width: 73%;
      height: 38px;
    }

    .time-ant {
      ::v-deep .ant-input {
        padding: 0 11px;
      }

      .ant-calendar-picker {
        width: 100%;
      }
    }
  }


  ::v-deep .ant-form-item-label {
    width: 13%;
    line-height: 20px;
  }

  ::v-deep .ant-form-item-control-wrapper {
    width: 87%;
    // padding-left: 15px;
  }

  ::v-deep .ant-form-item-control {
    height: 40px;
  }

  .ant-form-item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 18px;
  }

  // .ant-input {
  //   height: 38px;
  // }
}


.remake {
  .ant-form-item {
    align-items: start;
  }

  ::v-deep .ant-form-item-control {
    height: auto;
  }

  textarea.ant-input {
    // font-size: 16px;
  }

  ::v-deep .el-textarea.is-disabled .el-textarea__inner {
    background-color: #f5f5f5,
  }

  ::v-deep .el-textarea__inner {
    border-radius: 2px;
  }
}

::v-deep .ant-select-selection--single {
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  border-radius: 2px;
}

::v-deep .ant-select-selection__rendered {
  height: 38px;
  line-height: 38px;
}

::v-deep .ant-form-item-control-wrapper {
  margin-left: 15px;
}

::v-deep .ant-modal-body {}

.form_box {
  height: 550px;
  overflow-y: scroll;
}

::v-deep .ant-modal-footer {
  padding: 10px 16px 45px;

  .ant-btn {
    width: 76px;
    height: 35px;
    line-height: 34px;
    border-radius: 2px 2px 2px 2px;
    opacity: 1;

    padding: 0;


  }

  .ant-btn-primary {


    color: #ffffff;

    &:hover {
      color: #fff !important;
    }
  }
}

::v-deep .ant-modal-body {
  padding: 24px 50px 30px 24px;
}

::-webkit-scrollbar-thumb {

  border-radius: 9px 9px 9px 9px;
}

::v-deep .ant-form-item:last-child {
  .ant-form-item-control-wrapper {
    &::before {
      display: none;
    }
  }
}

::v-deep .ant-form-item-control-wrapper {
  position: relative;

  &::before {
    position: absolute;
    content: '*';
    color: #f10f0f;
    top: 0;
    right: -22px;
    font-size: 24px;
    line-height: 44px;
  }
}

.remake {
  .ant-form-item {
    align-items: start;
  }

  ::v-deep .ant-form-item-control {
    height: auto;
  }

  textarea.ant-input {
    padding-bottom: 20px;
    position: relative;
    // font-size: 16px;
  }

  span {
    position: absolute;
    top: -10px;
    right: 20px;
  }
}

// 测试按钮
.ant-col .ant-btn-primary {}

.ant-col .ant-btn-primary:hover {
  color: #fff;
}

.el-textarea__inner {
  border-radius: 2px !important;
}
</style>