<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <el-dialog
      title="评估报告装订后浏览审核记录表"
      :close-on-click-modal="false"
	  draggable
      width="1300px"
      @close="close"
      @keyup.enter.native=""
	  v-model="visible">
      <el-form size="large" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''" :disabled="method==='view'"
               label-width="220px" @submit.native.prevent>

        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="项目名称" prop="projectName">
              <el-input :disabled="true" v-model="inputForm.projectName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评估基准日" prop="assessmentDate">
              <el-input :disabled="true" v-model="inputForm.assessmentDate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目负责人" prop="projectManagerName">
              <el-input :disabled="true" v-model="inputForm.projectManagerName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目审核人" prop="processUserName">
              <el-input :disabled="true" v-model="inputForm.processUserName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核日期" prop="processDate">
              <el-date-picker
                placement="bottom-start"
                v-model="inputForm.processDate"
                type="date"
                :disabled="true"
                style="width: 100%"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left"><i class="el-icon-document"></i>报告、说明、明细表一致性</el-divider>
        <el-row :gutter="15" >
			<el-col :span="24">
				<vxe-table
					border
					show-overflow
					ref="detailFor40"
					class="vxe-table-element"
					:data="inputForm.detailFor40"
					style="margin-left: 5em"
					@cell-click=""
					@edit-closed=""
					highlight-current-row
					:edit-config="{trigger: 'click', mode: 'cell', showStatus: true, autoClear: true}"
				>
					<vxe-table-column field="typeName" title="审核要点" :edit-render="{}">
						<template v-slot:edit="scope">
							<el-input :disabled="true" v-model="scope.row.typeName" ></el-input>
						</template>
					</vxe-table-column>
					<vxe-table-column width="150px" field="reviewComments" title="审核情况（√/×）" :edit-render="{}">
						<template v-slot:edit="scope">
							<vxe-select v-model="scope.row.reviewComments" transfer>
								<vxe-option
									v-for="item in yesOrNo"
									:key="item.value"
									:value="item.label"
									:label="item.label">
								</vxe-option>
							</vxe-select>
						</template>
					</vxe-table-column>
					<vxe-table-column width="150px" field="replyComments" title="改正情况（√/×）" :edit-render="{name: '$select', options: yesOrNo}">
						<template v-slot:edit="scope">
							<vxe-select v-model="scope.row.replyComments" transfer>
								<vxe-option
									v-for="item in yesOrNo"
									:key="item.value"
									:value="item.label"
									:label="item.label">
								</vxe-option>
							</vxe-select>
						</template>
					</vxe-table-column>
				</vxe-table>
			</el-col>

        </el-row>

        <el-divider content-position="left"><i class="el-icon-document"></i>评估报告</el-divider>
        <el-row :gutter="15" >
			<el-col :span="24">
				<vxe-table
					border
					show-overflow
					ref="detailFor50"
					class="vxe-table-element"
					:data="inputForm.detailFor50"
					style="margin-left: 5em"
					@cell-click=""
					@edit-closed=""
					highlight-current-row
					:edit-config="{trigger: 'click', mode: 'cell', showStatus: true, autoClear: true}"
				>
					<vxe-table-column field="typeName" title="审核要点" :edit-render="{}">
						<template v-slot:edit="scope">
							<el-input :disabled="true" v-model="scope.row.typeName" ></el-input>
						</template>
					</vxe-table-column>
					<vxe-table-column width="150px" field="reviewComments" title="审核情况（√/×）" :edit-render="{}">
						<template v-slot:edit="scope">
							<vxe-select v-model="scope.row.reviewComments" transfer>
								<vxe-option
									v-for="item in yesOrNo"
									:key="item.value"
									:value="item.label"
									:label="item.label">
								</vxe-option>
							</vxe-select>
						</template>
					</vxe-table-column>
					<vxe-table-column width="150px" field="replyComments" title="改正情况（√/×）" :edit-render="{}">
						<template v-slot:edit="scope">
							<vxe-select v-model="scope.row.replyComments" transfer>
								<vxe-option
									v-for="item in yesOrNo"
									:key="item.value"
									:value="item.label"
									:label="item.label">
								</vxe-option>
							</vxe-select>
						</template>
					</vxe-table-column>
				</vxe-table>
			</el-col>

        </el-row>

        <el-divider content-position="left"><i class="el-icon-document"></i>评估说明</el-divider>
        <el-row :gutter="15" >
			<el-col :span="24">
				<vxe-table
					border
					show-overflow
					ref="detailFor60"
					class="vxe-table-element"
					:data="inputForm.detailFor60"
					style="margin-left: 5em"
					@cell-click=""
					@edit-closed=""
					highlight-current-row
					:edit-config="{trigger: 'click', mode: 'cell', showStatus: true, autoClear: true}"
				>
					<vxe-table-column field="typeName" title="审核要点" :edit-render="{}">
						<template v-slot:edit="scope">
							<el-input :disabled="true" v-model="scope.row.typeName" ></el-input>
						</template>
					</vxe-table-column>
					<vxe-table-column width="150px" field="reviewComments" title="审核情况（√/×）" :edit-render="{}">
						<template v-slot:edit="scope">
							<vxe-select v-model="scope.row.reviewComments" transfer>
								<vxe-option
									v-for="item in yesOrNo"
									:key="item.value"
									:value="item.label"
									:label="item.label">
								</vxe-option>
							</vxe-select>
						</template>
					</vxe-table-column>
					<vxe-table-column width="150px" field="replyComments" title="改正情况（√/×）" :edit-render="{}">
						<template v-slot:edit="scope">
							<vxe-select v-model="scope.row.replyComments" transfer>
								<vxe-option
									v-for="item in yesOrNo"
									:key="item.value"
									:value="item.label"
									:label="item.label">
								</vxe-option>
							</vxe-select>
						</template>
					</vxe-table-column>
				</vxe-table>
			</el-col>

        </el-row>

        <el-divider content-position="left"><i class="el-icon-document"></i>评估明细表</el-divider>
        <el-row :gutter="15" >
			<el-col :span="24">
				<vxe-table
					border
					show-overflow
					ref="detailFor70"
					class="vxe-table-element"
					:data="inputForm.detailFor70"
					style="margin-left: 5em"
					@cell-click=""
					@edit-closed=""
					highlight-current-row
					:edit-config="{trigger: 'click', mode: 'cell', showStatus: true, autoClear: true}"
				>
					<vxe-table-column field="typeName" title="审核要点" :edit-render="{}">
						<template v-slot:edit="scope">
							<el-input :disabled="true" v-model="scope.row.typeName" ></el-input>
						</template>
					</vxe-table-column>
					<vxe-table-column width="150px" field="reviewComments" title="审核情况（√/×）" :edit-render="{}">
						<template v-slot:edit="scope">
							<vxe-select v-model="scope.row.reviewComments" transfer>
								<vxe-option
									v-for="item in yesOrNo"
									:key="item.value"
									:value="item.label"
									:label="item.label">
								</vxe-option>
							</vxe-select>
						</template>
					</vxe-table-column>
					<vxe-table-column width="150px" field="replyComments" title="改正情况（√/×）" :edit-render="{}">
						<template v-slot:edit="scope">
							<vxe-select v-model="scope.row.replyComments" transfer>
								<vxe-option
									v-for="item in yesOrNo"
									:key="item.value"
									:value="item.label"
									:label="item.label">
								</vxe-option>
							</vxe-select>
						</template>
					</vxe-table-column>
				</vxe-table>
			</el-col>

        </el-row>

      </el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button  @click="close()" icon="el-icon-circle-close">关闭</el-button>
				<el-button  type="primary" v-if="method != 'view'" @click="doSubmit()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
			  </span>
		</template>


    </el-dialog>
  </div>
</template>

<script>
  import ProofreadInfoService from '@/api/sys/ProofreadInfoService'
  import ProofreadTypeService from '@/api/sys/ProofreadTypeService'
  import ProgramProjectListInfoService from '@/api/program/ProgramProjectListInfoService'
  import userService from '@/api/sys/userService'
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        inputForm: {
          projectId: '',
          projectName: '',
          assessmentDate: '',
          projectManagerName: '',
          processUserId: '',
          processUserName: '',
          processDate: '',
          reservations: '',
          unmodifiedComments: '',
          details: [],
          detailFor40: [],
          detailFor50: [],
          detailFor60: [],
          detailFor70: []
        },
        yesOrNo: [
          {value: 0, label: '×'},
          {value: 1, label: '√'}
        ]
      }
    },
    proofreadInfoService: null,
    proofreadTypeService: null,
    programProjectListInfoService: null,
    // UserService: null,
    created () {
      this.proofreadInfoService = new ProofreadInfoService()
      this.programProjectListInfoService = new ProgramProjectListInfoService()
      // this.userService = new UserService()
      this.proofreadTypeService = new ProofreadTypeService()
    },
    components: {
    },
    computed: {
      name () {
        return this.$store.state.user.name
      },
      userId () {
        return this.$store.state.user.id
      }
    },
    methods: {
      init (id) {
        this.inputForm = {
          projectId: '',
          projectName: '',
          assessmentDate: '',
          projectManagerName: '',
          processUserId: '',
          processUserName: '',
          processDate: '',
          reservations: '',
          unmodifiedComments: '',
          details: [],
          detailFor40: [],
          detailFor50: [],
          detailFor60: [],
          detailFor70: []
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.loading = true
          this.proofreadInfoService.findById(id, '2').then(async (data) => {
            if (!this.commonJS.isEmpty(data.projectId)) {
              this.$refs.inputForm.resetFields()
              this.inputForm = this.recover(this.inputForm, data)
              this.inputForm = JSON.parse(JSON.stringify(this.inputForm))
              this.inputForm.processDate = data.processDate
              this.detailDivide(data.details)
				this.loading = false
            } else {
              // 初始化
                let programInfo = await this.programProjectListInfoService.queryById(id)
				if (programInfo) {
					this.inputForm.projectId = programInfo.id
					this.inputForm.projectName = programInfo.name
					this.inputForm.assessmentDate = programInfo.assessmentDate
					let userInfo = await userService.queryById(programInfo.projectManager)
					if (userInfo) {
						this.inputForm.projectManagerName = userInfo.name
					}
				}
                this.inputForm.processUserId = this.userId
                this.inputForm.processUserName = this.name
                this.inputForm.processDate = new Date()
                let detail = await this.proofreadInfoService.list('2')
				if (detail) {
					this.detailDivide(detail)
				}
				this.loading = false
            }
          })
        })
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            // 列表处理
            this.inputForm.details = []
            this.inputForm.detailFor40.forEach(item => { this.inputForm.details.push(item) })
            this.inputForm.detailFor50.forEach(item => { this.inputForm.details.push(item) })
            this.inputForm.detailFor60.forEach(item => { this.inputForm.details.push(item) })
            this.inputForm.detailFor70.forEach(item => { this.inputForm.details.push(item) })
            this.inputForm.type = '2'
            this.proofreadInfoService.save(this.inputForm).then((data) => {
              this.close()
              this.$message.success(data)
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          }
        })
      },
      close () {
        this.$refs.inputForm.resetFields()
        this.visible = false
      },
      detailDivide (details) {
        this.inputForm.detailFor40 = []
        this.inputForm.detailFor50 = []
        this.inputForm.detailFor60 = []
        this.inputForm.detailFor70 = []
        details.forEach(item => {
          if (item.sort.startsWith('40')) {
            this.inputForm.detailFor40.push(item)
          }
          if (item.sort.startsWith('50')) {
            this.inputForm.detailFor50.push(item)
          }
          if (item.sort.startsWith('60')) {
            this.inputForm.detailFor60.push(item)
          }
          if (item.sort.startsWith('70')) {
            this.inputForm.detailFor70.push(item)
          }
        })
      }
    }
  }
</script>
<style scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
</style>

<style>
  .vxe-select--panel {
    z-index: 9997 !important
  }
  .vxe-input--panel.type--date, .vxe-input--panel.type--month, .vxe-input--panel.type--week, .vxe-input--panel.type--year {
    z-index: 9998 !important
  }
</style>
