<template>
  <div id="detailInfo">
   <div class="content">
     <div class="detail_header">
       <el-row :gutter="24">
         <el-col :span="22">
           <div class="bread_detail">
             <el-breadcrumb separator="/">
               <el-breadcrumb-item>{{FirstTitle}}</el-breadcrumb-item>
               <el-breadcrumb-item>{{SecondTitle}}</el-breadcrumb-item>
             </el-breadcrumb>
           </div>
         </el-col>
         <el-col :span="2">
           <el-button type="primary" icon="el-icon-back" @click="onBack">返回</el-button>
         </el-col>
       </el-row>
     </div>
     <el-divider></el-divider>
     <div class="detail_content">
       <span class="little_title">事项信息</span>
       <el-col span="24">
       <el-form ref="form" :model="form" class="form_content" :disabled="IsDisabled" label-width="140px">
         <el-col span="12">
         <el-form-item label="基本编码：">
           <el-input maxlength="12" oninput ="value=value.replace(/[^\d]/g,'')" v-model="form.code"></el-input>
         </el-form-item>
         </el-col>
         <el-col span="12">
         <el-form-item label="统一社会信用代码：">
           <el-input maxlength="18" oninput ="value=value.replace(/[^\d]/g,'')" v-model="form.social_code"></el-input>
         </el-form-item>
         </el-col>
         <el-col span="12">
         <el-form-item label="层级：">
           <el-select v-model="form.level" style="width:100%"
                       placeholder="请选择层级">
             <el-option
                 v-for="item in levelList"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
             </el-option>
           </el-select>
         </el-form-item>
         </el-col>
         <el-col span="12">
         <el-form-item label="事项名称：">
           <el-input v-model="form.name"></el-input>
         </el-form-item>
         </el-col>
         <el-col span="12">
         <el-form-item label="事项类型：">
           <el-select v-model="form.type" style="width:100%"
                       placeholder="请选择事项类型">
             <el-option
                 v-for="item in typeList"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
             </el-option>
           </el-select>
         </el-form-item>
         </el-col>
         <el-col span="12">
<!--         <el-form-item label="业务情形：">-->
<!--           <el-input v-model="form.situation"></el-input>-->
<!--         </el-form-item>-->
         <el-form-item label="责任单位：">
           <el-select v-model="form.unit" style="width:100%"    filterable
                      allow-create placeholder="请选择责任单位">
             <el-option
                 v-for="item in responsibleUintList"
                 :key="item.UNIT_NAME"
                 :label="item.UNIT_NAME"
                 :value="item.UNIT_NAME">
             </el-option>
           </el-select>
         </el-form-item>
         </el-col>
         <el-col span="12">
         <el-form-item label="配合部门：">
           <el-select
               v-model="form.department" style="width:100%"
               multiple
               filterable
               allow-create
               default-first-option
               placeholder="请选择配合部门">
             <el-option
                 v-for="item in operationUintList"
                 :key="item.UNIT_NAME"
                 :label="item.UNIT_NAME"
                 :value="item.UNIT_NAME">
             </el-option>
           </el-select>
         </el-form-item>
         </el-col>
       </el-form>
       </el-col>
       <div>
         <span class="little_title">情形信息</span>

         <div  class="table-area">
           <template>
             <el-table
                 :data="delectedArr"
                 height="280"
                 style="width: 100%;"
             >
               <el-table-column
                   prop="name"
                   label="序号"
                   width="50">
                 <template  slot-scope="scope">
                   <span>{{scope.$index + 1}}</span>
                 </template>
               </el-table-column>
               <el-table-column
                   prop="name"
                   label="业务情形编码"
                   width="200">
                 <template  slot-scope="scope">
                   <span><el-input :disabled="type =='view'" maxlength="2" oninput ="value=value.replace(/[^\d]/g,'')" type="text" v-model="scope.row.QX_CODE"/></span>
                 </template>
               </el-table-column>
               <el-table-column
                   prop="name"
                   label="情形名称"
                   width="380">
                 <template  slot-scope="scope">
                   <span><el-input :disabled="type =='view'"  type="text" v-model="scope.row.SITUATION"/></span>
                 </template>
               </el-table-column>
               <el-table-column
                   prop="name"
                   label="是否网办"
                   width="100">
                 <template   slot-scope="scope">
                   <el-select :disabled="type =='view'" v-model="scope.row.WB" style="width:100%"
                               placeholder="请选择">
                     <el-option
                         v-for="item in TruthList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                     </el-option>
                   </el-select>
                 </template>
               </el-table-column>
               <el-table-column
                   prop="name"
                   label="是否好办"
                   width="100">
                 <template   slot-scope="scope">
                   <el-select :disabled="type =='view'" v-model="scope.row.HB" style="width:100%"
                              placeholder="请选择">
                     <el-option
                         v-for="item in TruthList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                     </el-option>
                   </el-select>
                 </template>
               </el-table-column>
               <el-table-column
                   prop="name"
                   label="是否快办"
                   width="100">
                 <template   slot-scope="scope">
                   <el-select :disabled="type =='view'" v-model="scope.row.KB" style="width:100%"
                              placeholder="请选择">
                     <el-option
                         v-for="item in TruthList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                     </el-option>
                   </el-select>
                 </template>
               </el-table-column>
               <el-table-column
                   prop="name"
                   label="是否全程网办"
                   width="100">
                 <template   slot-scope="scope">
                   <el-select :disabled="type =='view'" v-model="scope.row.QCWB" style="width:100%"
                              placeholder="请选择">
                     <el-option
                         v-for="item in TruthList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                     </el-option>
                   </el-select>
                 </template>
               </el-table-column>
               <el-table-column
                   prop="name"
                   label="责任单位"
                   width="480">
                 <template   slot-scope="scope">
                     <el-select :disabled="type =='view'" v-model="scope.row.UNIT_NAME" style="width:100%"    filterable   multiple
                                allow-create placeholder="请选择责任单位">
                       <el-option
                           v-for="item in responsibleSituationUintList"
                           :key="item.UNIT_NAME"
                           :label="item.UNIT_NAME"
                           :value="item.UNIT_NAME">
                       </el-option>
                     </el-select>
                 </template>
               </el-table-column>


               <el-table-column

                   label="操作">
                 <template slot-scope="scope">
                   <el-button class="dialog_button"  @click="handleClick(scope.row,'view')" type="text" size="small">预览</el-button>
                   <el-button class="dialog_button" :disabled="IsDisabled" @click="handleClick(scope.row,'edit')" type="text" size="small">编辑</el-button>
                   <el-button class="dialog_button" :disabled="IsDisabled" type="text" size="small" @click="del(scope.row)">删除</el-button>
                 </template>
               </el-table-column>
             </el-table>
           </template>

         </div>
         <div  class="add-btn">
           <el-button class="dialog_button" :disabled="IsDisabled" type="text" size="small" @click="add">+添加</el-button>
<!--           <span>+</span>-->
<!--           <span>添加</span>-->
         </div>
       </div>
       <div class="btns">
         <el-button :disabled="IsDisabled" type="primary" @click="onSubmit">保存</el-button>
         <el-button :disabled="IsDisabled" @click="onBack">取消</el-button>
       </div>
   </div>

    </div>
    <el-dialog title="办件指南" :visible.sync="dialogFormVisible" :width="dialogFormWidth"  :top="dialogFormTop">
      <div class="guide_body">
        <h1 class="item_title">{{ dialog_item_title }}</h1>
        <h3 class="situation_title">{{dialog_situation_title}}</h3>
        <div class="step_menu">
          <div class="step_top">
            <div class="single_step">
              <div class="single_button" :class="[stepList[0].chosen?'single_button_active':'']" @click="chooseStep(stepList[0].id)">
                <span class="single_num">{{stepList[0].id}}</span>
              </div>
            </div>
            <div class="line">
              <el-divider></el-divider>
            </div>
            <div class="single_step">
              <div class="single_button" :class="[stepList[1].chosen?'single_button_active':'']" @click="chooseStep(stepList[1].id)">
                <span class="single_num">{{stepList[1].id}}</span>
              </div>
            </div>
            <div class="line">
              <el-divider></el-divider>
            </div>
            <div class="single_step">
              <div class="single_button" :class="[stepList[2].chosen?'single_button_active':'']" @click="chooseStep(stepList[2].id)">
                <span class="single_num">{{stepList[2].id}}</span>
              </div>
            </div>
            <div class="line">
              <el-divider></el-divider>
            </div>
            <div class="single_step">
              <div class="single_button" :class="[stepList[3].chosen?'single_button_active':'']" @click="chooseStep(stepList[3].id)">
                <span class="single_num">{{stepList[3].id}}</span>
              </div>
            </div>
            <div class="line">
              <el-divider></el-divider>
            </div>
            <div class="single_step">
              <div class="single_button" :class="[stepList[4].chosen?'single_button_active':'']" @click="chooseStep(stepList[4].id)">
                <span class="single_num">{{stepList[4].id}}</span>
              </div>
            </div>
            <div class="line">
              <el-divider></el-divider>
            </div>
            <div class="single_step">
              <div class="single_button" :class="[stepList[5].chosen?'single_button_active':'']" @click="chooseStep(stepList[5].id)">
                <span class="single_num">{{stepList[5].id}}</span>
              </div>
            </div>
            <div class="line">
              <el-divider></el-divider>
            </div>
            <div class="single_step">
              <div class="single_button" :class="[stepList[6].chosen?'single_button_active':'']" @click="chooseStep(stepList[6].id)">
                <span class="single_num">{{stepList[6].id}}</span>
              </div>
            </div>
            <div class="line">
              <el-divider></el-divider>
            </div>
            <div class="single_step">
              <div class="single_button" :class="[stepList[7].chosen?'single_button_active':'']" @click="chooseStep(stepList[7].id)">
                <span class="single_num">{{stepList[7].id}}</span>
              </div>
            </div>
          </div>
          <div class="step_bottom">
            <div class="single_title_left">
              <span class="single_remarks">{{stepList[0].name}}</span>
            </div>
            <div class="single_title">
              <span class="single_remarks">{{stepList[1].name}}</span>
            </div>
            <div class="single_title">
              <span class="single_remarks">{{stepList[2].name}}</span>
            </div>
            <div class="single_title">
              <span class="single_remarks">{{stepList[3].name}}</span>
            </div>
            <div class="single_title">
              <span class="single_remarks">{{stepList[4].name}}</span>
            </div>
            <div class="single_title">
              <span class="single_remarks">{{stepList[5].name}}</span>
            </div>
            <div class="single_title">
              <span class="single_remarks">{{stepList[6].name}}</span>
            </div>
            <div class="single_title_right">
              <span class="single_remarks">{{stepList[7].name}}</span>
            </div>
          </div>
        </div>

        <div class="basic_info">
          <table v-if="chosenStep=='1'" border="1" :key="1" class="basic_table">
            <tr class="basic_tr" v-for="(item,index) in dialogLeftList" :key="index">
              <td class="td_title">{{item.title}}</td>
              <td class="td_content">
                <span  v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" v-model="item.content"/></span>
              </td>
              <td class="td_title">{{dialogRightList[index].title}}</td>
              <td class="td_content">
                <span  v-if="showEdit">{{dialogRightList[index].content}}</span>
                <span v-else><el-input type="textarea" v-model="dialogRightList[index].content"/></span>
              </td>
            </tr>
            <tr class="basic_tr" v-for="(item,index) in dialogBottomList" :key="index">
              <td colspan="1" class="td_bottom_title">{{item.title}}</td>
              <td colspan="3" class="td_bottom_content">
                <span  v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" v-model="item.content"/></span>
              </td>
            </tr>
          </table>
          <div v-else-if="chosenStep=='2'" :key="2" class="step_info">
            <div class="single_sqlc"  v-for="(item,index) in dialog_sqlc_List" :key="index">
              <div class="sqlc_title">
                <span>{{item.title}}:</span>
              </div>
              <div class="sqlc_content">
                <span v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" rows="4" v-model="item.content"/></span>
              </div>
            </div>
          </div>
          <div v-else-if="chosenStep=='3'" :key="3" class="step_info">
            <div class="single_sqlc"  v-for="(item,index) in dialog_bllc_List" :key="index">
              <div class="sqlc_title">
                <span>{{item.title}}:</span>
              </div>
              <div class="sqlc_content">
                <span v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" rows="4" v-model="item.content"/></span>
              </div>
            </div>
          </div>
          <div v-else-if="chosenStep=='4'" :key="4" class="step_info">
            <div class="single_sqlc"  v-for="(item,index) in dialog_cjcwsl_List" :key="index">
              <div class="sqlc_title">
                <span>{{item.title}}:</span>
              </div>
              <div class="sqlc_content">
                <span v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" rows="4" v-model="item.content"/></span>
              </div>
            </div>
          </div>
          <div v-else-if="chosenStep=='5'" :key="5" class="step_info">
            <div class="single_sqlc"  v-for="(item,index) in dialog_slyj_List" :key="index">
              <div class="sqlc_title">
                <span>{{item.title}}:</span>
              </div>
              <div class="sqlc_content">
                <span v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" rows="4" v-model="item.content"/></span>
              </div>
            </div>
          </div>
          <div v-else-if="chosenStep=='6'" :key="6" class="step_info">
            <div class="single_sqlc"  v-for="(item,index) in dialog_flnr_List" :key="index">
              <div class="sqlc_title">
                <span>{{item.title}}:</span>
              </div>
              <div class="sqlc_content">
                <span v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" rows="4" v-model="item.content"/></span>
              </div>
            </div>
          </div>
          <div v-else-if="chosenStep=='7'" :key="7" class="step_info">
            <div class="single_sqlc"  v-for="(item,index) in dialog_spsf_List" :key="index">
              <div class="sqlc_title">
                <span>{{item.title}}:</span>
              </div>
              <div class="sqlc_content">
                <span v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" rows="4" v-model="item.content"/></span>
              </div>
            </div>
          </div>
          <div v-else :key="8" class="step_info">
            <div class="single_sqlc"  v-for="(item,index) in dialog_qlyw_List" :key="index">
              <div class="sqlc_title">
                <span>{{item.title}}:</span>
              </div>
              <div class="sqlc_content">
                <span v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" rows="4" :autosize="{minRows:4,maxRows:8}" v-model="item.content"/></span>
              </div>
            </div>
          </div>
        </div>


      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveSingleAttribute">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {MessageBox} from "element-ui";
export default {
  name: "DetailInfo",
  data(){
    return{
      type:'',
      IsDisabled:true,
      FirstTitle:'事项和指南',
      SecondTitle:'',
      base_code:'',
      form: {
        code: '',
        social_code:'',
        level:'',
        name: '',
        type:'',
        unit: [],
        department: [],
      },
      detailData:{},
      delectedArr:[],
      levelList:[
        {
          label:'国家级',
          value:'1'
        },
        {
          label:'省级',
          value:'2'
        },
        {
          label:'地市级',
          value:'3'
        },
        {
          label:'区县级',
          value:'4'
        },
        {
          label:'乡镇级',
          value:'5'
        },
        {
          label:'村居级',
          value:'6'
        },
        {
          label:'分级管理',
          value:'7'
        },
      ],
      typeList:[
        {
          label:'行政许可',
          value:'行政许可'
        },
        {
          label:'行政确认',
          value:'行政确认'
        },
        {
          label:'行政奖励',
          value:'行政奖励'
        },
        {
          label:'行政征收',
          value:'行政征收'
        },
        {
          label:'其他权利',
          value:'其他权利'
        },
        {
          label:'公共服务',
          value:'公共服务'
        },
      ],
      TruthList:[
        {
          label:'是',
          value:'1'
        },
        {
          label:' 否',
          value:'0'
        },
      ],
      responsibleSituationUintList:[],
      responsibleUintList:[],
      operationUintList:[],
      showList:false,
      fileList:[],
      //模态框参数
      dialogFormWidth:'60%',
      dialogFormTop:'10vh',
      dialogFormVisible: false,
      dialogLeftList:[
        {
          id:'1',
          code:'matter_type',
          title:'事项类型',
          content:''
        },
        {
          id:'2',
          code:'pt_code',
          title:'平台编码',
          content:''
        },
        {
          id:'3',
          code:'sszt',
          title:'实施主体',
          content:''
        },
        {
          id:'4',
          code:'ssztbm',
          title:'实施主体编码',
          content:''
        },
        // {
        //   id:'5',
        //   code:'ywblxbm',
        //   title:'业务办理项编码',
        //   content:''
        // },
        {
          id:'6',
          code:'tbfw',
          title:'通办范围',
          content:''
        },
        {
          id:'7',
          code:'matter_state',
          title:'事项状态',
          content:''
        },
        {
          id:'8',
          code:'ql_ly',
          title:'权力来源',
          content:''
        },
        {
          id:'9',
          code:'sfzc_yybl',
          title:'是否支持预约办理',
          content:''
        },
        {
          id:'10',
          code:'sfzc_wlkd',
          title:'是否支持物流快递',
          content:''
        },
        {
          id:'11',
          code:'zjfw',
          title:'中介服务',
          content:''
        },
        {
          id:'12',
          code:'yxxt',
          title:'运行系统',
          content:''
        },
        {
          id:'13',
          code:'fdbjsx',
          title:'法定办结时限',
          content:''
        },
        {
          id:'14',
          code:'cnbjsx',
          title:'承诺办结时限',
          content:''
        },
        {
          id:'15',
          code:'ckjs',
          title:'窗口接收',
          content:''
        },
        {
          id:'16',
          code:'wsjs',
          title:'网上接收',
          content:''
        },
        {
          id:'17',
          code:'xhjs',
          title:'信函接收',
          content:''
        },
        {
          id:'18',
          code:'ckjs_sj',
          title:'窗口接收时间',
          content:''
        },
      ],
      dialogRightList:[
        {
          id:'1',
          code:'bj_type',
          title:'办件类型',
          content:''
        },
        {
          id:'2',
          code:'BASIC_CODE',
          title:'基本编码',
          content:''
        },
        {
          id:'3',
          code:'ssztxz',
          title:'实施主体性质',
          content:''
        },
        {
          id:'4',
          code:'lbjg',
          title:'联办机构',
          content:''
        },
        {
          id:'5',
          code:'fwdx',
          title:'服务对象',
          content:''
        },
        {
          id:'6',
          code:'xscj',
          title:'行使层级',
          content:''
        },
        {
          id:'7',
          code:'zgbm_name',
          title:'主管部门名称',
          content:''
        },
        {
          id:'8',
          code:'sfjz_zwdt',
          title:'是否进驻政务大厅',
          content:''
        },
        {
          id:'9',
          code:'sfzc_wszf',
          title:'是否支持网上支付',
          content:''
        },
        {
          id:'10',
          code:'sfzc_zdbl',
          title:'是否支持自助终端办理',
          content:''
        },
        {
          id:'11',
          code:'slxz',
          title:'数量限制',
          content:''
        },
        {
          id:'12',
          code:'dbsdd_cs',
          title:'到场次数',
          content:''
        },
        {
          id:'13',
          code:'fdbjsxsm',
          title:'法定办结时限说明',
          content:''
        },
        {
          id:'14',
          code:'cnbjsxsm',
          title:'承诺办结时限说明',
          content:''
        },
        {
          id:'15',
          code:'ckzx',
          title:'窗口咨询',
          content:''
        },
        {
          id:'16',
          code:'dhzx',
          title:'电话咨询',
          content:''
        },
        {
          id:'17',
          code:'wszx',
          title:'网上咨询',
          content:''
        },
        {
          id:'18',
          code:'dzyjzx',
          title:'电子邮件咨询',
          content:''
        },
      ],
      dialogBottomList:[
        {
          id:'1',
          code:'ckst',
          title:'窗口投诉',
          content:''
        },
        {
          id:'2',
          code:'dhst',
          title:'电话投诉',
          content:''
        },
        {
          id:'3',
          code:'wsts',
          title:'网上投诉',
          content:''
        },
        {
          id:'4',
          code:'dzyjts',
          title:'电子邮件投诉',
          content:''
        },
        {
          id:'5',
          code:'xhts',
          title:'信函投诉',
          content:''
        },
        {
          id:'6',
          code:'rcyy',
          title:'日常用语',
          content:''
        },
        {
          id:'7',
          code:'mxzrr_sxztfl',
          title:'面向自然人事项主题分类',
          content:''
        },
        {
          id:'8',
          code:'mxfr_sxztfl',
          title:'面向法人事项主题分类',
          content:''
        },
        {
          id:'9',
          code:'cjdx',
          title:'许可/确认/给付/征收/奖励/服务/裁决对象',
          content:''
        },
        {
          id:'10',
          code:'ws_blsd',
          title:'网上办理深度',
          content:''
        },
        {
          id:'11',
          code:'syfw',
          title:'适用范围',
          content:''
        },
        {
          id:'12',
          code:'zjfwyj',
          title:'中介服务依据',
          content:''
        },
        {
          id:'13',
          code:'cjtj',
          title:'许可/确认/给付/征收/奖励/服务/裁决条件',
          content:''
        },
        {
          id:'14',
          code:'cjnr',
          title:'许可/确认/给付/征收/奖励/服务/裁决内容',
          content:''
        },
        {
          id:'15',
          code:'qxhf',
          title:'权限划分',
          content:''
        },
      ],
      dialog_sqlc_List:[
        {
          id:'1',
          code:'sltj',
          title:'受理条件',
          content:''
        },
        {
          id:'2',
          code:'sqqx',
          title:'申请期限',
          content:''
        },
        {
          id:'3',
          code:'tbxz',
          title:'填报须知',
          content:''
        },
        {
          id:'4',
          code:'sqcl_xsbz',
          title:'申请材料形式标准',
          content:''
        },
        {
          id:'5',
          code:'sqwsmc',
          title:'申请文书名称',
          content:''
        },
      ],
      dialog_bllc_List:[
        {
          id:'1',
          code:'slqx',
          title:'受理期限',
          content:''
        },
        {
          id:'2',
          code:'sfsqbl',
          title:'是否社区办理',
          content:''
        },
        {
          id:'3',
          code:'bxxcbl_yysm',
          title:'必须现场办理原因说明',
          content:''
        },
        {
          id:'4',
          code:'blfs',
          title:'办理方式',
          content:''
        },
        {
          id:'5',
          code:'tbcx',
          title:'特别程序',
          content:''
        },
      ],
      dialog_cjcwsl_List:[
        {
          id:'1',
          code:'cjcwsl',
          title:'常见错误示例',
          content:''
        },
      ],
      dialog_slyj_List:[
        {
          id:'1',
          code:'slyj',
          title:'设立依据',
          content:''
        },
      ],
      dialog_flnr_List:[
        {
          id:'1',
          code:'flnr',
          title:'法律内容',
          content:''
        },
        {
          id:'2',
          code:'flzr',
          title:'法律责任',
          content:''
        },
      ],
      dialog_spsf_List:[
        {
          id:'1',
          code:'sfsf',
          title:'是否收费',
          content:''
        },
      ],
      dialog_qlyw_List:[
        {
          id:'1',
          code:'sqrql',
          title:'申请人权力',
          content:''
        },
        {
          id:'2',
          code:'sqryw',
          title:'申请人义务',
          content:''
        },
      ],
      chosenStep:'1',
      globalList:[
        {
          id:'1',
          name:'dialogLeftList'
        },
        {
          id:'2',
          name:'dialogRightList'
        },
        {
          id:'3',
          name:'dialogBottomList'
        },
        {
          id:'4',
          name:'dialog_sqlc_List'
        },
        {
          id:'5',
          name:'dialog_bllc_List'
        },
        {
          id:'6',
          name:'dialog_cjcwsl_List'
        },
        {
          id:'7',
          name:'dialog_slyj_List'
        },
        {
          id:'8',
          name:'dialog_flnr_List'
        },
        {
          id:'9',
          name:'dialog_spsf_List'
        },
        {
          id:'10',
          name:'dialog_qlyw_List'
        },
      ],
      dialog_item_title:'',
      dialog_situation_title:'',
      stepList:[
        {
          id:'1',
          name:'基础信息',
          chosen:true
        },
        {
          id:'2',
          name:'申请流程',
          chosen:false
        },
        {
          id:'3',
          name:'办理流程',
          chosen:false
        },
        {
          id:'4',
          name:'常见错误示例',
          chosen:false
        },
        {
          id:'5',
          name:'设立依据',
          chosen:false
        },
        {
          id:'6',
          name:'法律内容',
          chosen:false
        },
        {
          id:'7',
          name:'审批收费',
          chosen:false
        },
        {
          id:'8',
          name:'权利义务',
          chosen:false
        },
      ],
      showEdit:false,
      inuse_uuid:''
    }
  },
  mounted() {
    this.SecondTitle = this.$route.query.name;
    this.type = this.$route.query.detailType;
    this.base_code = this.$route.query.base_code;
    this.getResponsibleUnit();

  },
  methods:{
    saveSingleAttribute(){
      for(let i=0;i<this.delectedArr.length;i++){
        if(this.inuse_uuid ==this.delectedArr[i].INUSE_UUID){
          this.delectedArr[i] = this.setDialogInfo(this.delectedArr[i]);
        }
      }

      this.dialogFormVisible = false
    },
    setDialogInfo(obj){
      for(let j =0;j<this.globalList.length;j++){
        for(let i =0;i<this[this.globalList[j].name].length;i++){
          obj[this[this.globalList[j].name][i].code.toUpperCase()] = this[this.globalList[j].name][i].content;
        }
      }
      return obj;
    },
    viewDialog(item){
          this.fillDialogDetail(item);
          this.dialogFormVisible = true;
          this.chooseStep('1');
    },
    fillDialogDetail(dataArr){
      for(let index in dataArr){
        for(let j =0;j<this.globalList.length;j++){
          for(let i =0;i<this[this.globalList[j].name].length;i++){
            if(index==this[this.globalList[j].name][i].code.toUpperCase()){
              this[this.globalList[j].name][i].content = dataArr[index];
            }
          }
        }
      }
    },
    chooseStep(id){
      for(let i=0;i<this.stepList.length;i++){
        this.chosenStep= id;
        if(id==this.stepList[i].id){
          this.stepList[i].chosen = true;
        }else{
          this.stepList[i].chosen = false;
        }
      }
    },
    getSituationInfo(){
      this.$request({
        url:'ywtb/selectYwtbMatterByCode',
        method:'post',
        data:{
          "BASE_CODE":this.base_code
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows[0];
        this.detailData = dataArr;
        for(let i=0;i<dataArr.ATTRIBUTE_LIST.length;i++){
          dataArr.ATTRIBUTE_LIST[i].INUSE_UUID = this.uuid();
          dataArr.ATTRIBUTE_LIST[i].UNIT_NAME =  dataArr.ATTRIBUTE_LIST[i].UNIT_NAME.split('、') ;
        }
        this.delectedArr = dataArr.ATTRIBUTE_LIST;
        this.showType();
      })
    },
    showType(){
      if(this.type =='view'){
        this.IsDisabled = true;
        //this.detailData = JSON.parse(this.$route.query.detailData);
        this.setBasicInfo();
      }else if(this.type =='edit'){
        this.IsDisabled = false;
        //this.detailData = JSON.parse(this.$route.query.detailData);
        this.setBasicInfo();
      }else if(this.type =='add'){
        this.IsDisabled = false;
        this.$refs.form.resetFields();     //清空表单
      }
    },
    getResponsibleUnit(){
      this.$request({
        url:'ywtb/selectYwtbMatteraAllUnitName',
        method:'post',
        data:{
          "TYPE":'0'
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows;
        this.responsibleUintList = dataArr;
        this.getOpertionUnit();
      })
    },
    getOpertionUnit(){
      this.$request({
        url:'ywtb/selectYwtbMatteraAllUnitName',
        method:'post',
        data:{
          "TYPE":'1'
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows;
        this.operationUintList = dataArr;
        this.getSituationUnit();

      })
    },

    getSituationUnit(){
      this.$request({
        url:'ywtb/selectYwtbMatteraAllUnitName',
        method:'post',
        data:{
          "TYPE":'0'
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows;
        this.responsibleSituationUintList = dataArr;
        if(this.type =='view'||this.type =='edit'){
          this.getSituationInfo();
        }else{
          this.detailData = [];
          this.delectedArr = [];
          this.showType();
        }


      })
    },
    setBasicInfo(){
      this.form.social_code= this.detailData.ATTRIBUTE_LIST[0].ATTRIBUTE_CODE.substring(0,18) ;
      this.form.level=this.detailData.ATTRIBUTE_LIST[0].ATTRIBUTE_CODE.substring(18,19) ;
      this.form.code= this.detailData.BASE_CODE ;
      this.form.name=this.detailData.NAME ;
      this.form.unit=this.detailData.RESPONSIBLE_DEPARTMENT ;
      this.form.type = this.detailData.TYPE ;
      this.form.department=this.detailData.COOPERATION_DEPARTMENT.split('、') ;
    },
    onSubmit() {

      if(this.form.code.length !==12){
        MessageBox.alert('请输入12位基本编码', '提示', {
          confirmButtonText: '确定'
        });
        return;
      }

      if(this.form.social_code.length !==18){
        MessageBox.alert('请输入18位统一社会信用代码', '提示', {
          confirmButtonText: '确定'
        });
        return;
      }

      if(this.form.level ==''){
        MessageBox.alert('请选择层级', '提示', {
          confirmButtonText: '确定'
        });
        return;
      }
      if(this.form.name ==''){
        MessageBox.alert('请输入事项名称', '提示', {
          confirmButtonText: '确定'
        });
        return;
      }
      if(this.form.type ==''){
        MessageBox.alert('请选择事项类型', '提示', {
          confirmButtonText: '确定'
        });
        return;
      }
      if(this.form.unit ==''){
        MessageBox.alert('请选择责任单位', '提示', {
          confirmButtonText: '确定'
        });
        return;
      }
      if(this.form.department.length == 0){
        MessageBox.alert('请选择配合部门', '提示', {
          confirmButtonText: '确定'
        });
        return;
      }



      if(this.delectedArr.length >0){
        const singleId = this.delectedArr.map(value => value.QX_CODE);
        const singleIdSet = new Set(singleId);
        if(singleIdSet.size !==this.delectedArr.length){
          MessageBox.alert('存在重复业务情形编码', '提示', {
            confirmButtonText: '确定'
          });
          return;
        }

        for(let i=0;i<this.delectedArr.length;i++){
          if(this.delectedArr[i].SITUATION==''){
            MessageBox.alert('情形名称不能为空', '提示', {
              confirmButtonText: '确定'
            });
            return;
          }
          if(this.delectedArr[i].WB==''){
            MessageBox.alert('请选择是否网办', '提示', {
              confirmButtonText: '确定'
            });
            return;
          }
          if(this.delectedArr[i].HB==''){
            MessageBox.alert('请选择是否好办', '提示', {
              confirmButtonText: '确定'
            });
            return;
          }
          if(this.delectedArr[i].KB==''){
            MessageBox.alert('请选择是否快办', '提示', {
              confirmButtonText: '确定'
            });
            return;
          }
          if(this.delectedArr[i].QCWB==''){
            MessageBox.alert('请选择是否全程网办', '提示', {
              confirmButtonText: '确定'
            });
            return;
          }
        }

        const singUnit = this.delectedArr.map(value => value.UNIT_NAME);
        for(let i=0;i<singUnit.length;i++){
          if(singUnit[i].length==0){
            MessageBox.alert('情形责任单位不能为空', '提示', {
              confirmButtonText: '确定'
            });
            return;
          }
        }

      }



      for(let i=0;i<this.delectedArr.length;i++){
        this.delectedArr[i].UNIT_NAME = this.delectedArr[i].UNIT_NAME.join('、') ;
        this.delectedArr[i].MATTER_BASE_CODE =  this.form.social_code +this.form.level + this.form.code;
        this.delectedArr[i].ATTRIBUTE_CODE = this.form.social_code +this.form.level + this.form.code +this.delectedArr[i].QX_CODE;
        this.delectedArr[i].YWBLXBM =this.form.social_code +this.form.level + this.form.code +this.delectedArr[i].QX_CODE;
      }



      this.$request({
        url:'ywtb/editYwtbMatter',
        method:'post',
        data:{
          "NAME":this.form.name,
          "TYPE":this.form.type,
          "BASE_CODE":this.form.code,
          "RESPONSIBLE_DEPARTMENT":this.form.unit,
          "COOPERATION_DEPARTMENT":this.form.department.join('、'),
          "UNIT_CODE":'',
          "ORGANIZATION":'1',
          "ATTRIBUTE_LIST":this.delectedArr
        }
      }).then(response => {
        if(response.data.msg[0].success =='true'){
          MessageBox.alert('保存成功', '提示', {
            confirmButtonText: '确定'
          });
          this.$router.push({
            name:'mainBody',
          })
        }else{
          this.loading=false;
          MessageBox.alert('保存失败', '提示', {
            confirmButtonText: '确定'
          });
        }
      })

    },
    onBack(){
      this.$router.push({
        name:'mainBody',
      })
    },
    handleClick(ite,type){
      //this.$refs.upload.submit();
      if(type=='view'){
        this.showEdit = true;
        // if(ite.QX_CODE ==''){
        //   MessageBox.alert('请先输入情形编码', '提示', {
        //     confirmButtonText: '确定'
        //   });
        // }
        this.viewDialog(ite)
      }else{
        this.inuse_uuid = ite.INUSE_UUID;
        this.showEdit = false;
        this.viewDialog(ite)
      }
    },
    del(item){
      this.delectedArr.splice(this.delectedArr.indexOf(item),1);
     // console.log(item)
    },
    add() {
      this.delectedArr.push({
        INUSE_UUID :this.uuid(),
        QX_CODE:'',
        SITUATION: '',
        WB: '',
        KB: '',
        HB: '',
        QCWB: '',
        UNIT_NAME: '',
      })
    },
    uploadError (response, file, fileList) {
      this.loading=false;
      console.log('读取指南信息失败，请重试！',response, file, fileList)
    },
    uploadSuccess (response, file, fileList) {
      console.log('上传文件', response,file, fileList)
      if(response.msg[0].Rows.length>0){
        this.loading=false;
        MessageBox.alert('读取指南信息成功', '提示', {
          confirmButtonText: '确定'
        });

      }else{
        this.loading=false;
        MessageBox.alert('读取指南信息失败', '提示', {
          confirmButtonText: '确定'
        });
      }
    },
    // 上传前对文件的大小的判断
    beforeAvatarUpload (file) {
      this.loading=true;
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension && !extension2) {
        this.loading=false;
        MessageBox.alert('上传模板只能是 xls、xlsx 格式!', '提示', {
          confirmButtonText: '确定'
        });
      }
      if (!isLt2M) {
        this.loading=false;
        MessageBox.alert('上传模板大小不能超过 10MB!', '提示', {
          confirmButtonText: '确定'
        });
      }
      return extension || extension2  && isLt2M
    },
    uuid() {
      let s = [];
      let hexDigits = "0123456789abcdef";
      for (let i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      let uuid = s.join("");
      return uuid;
    }
  }
}
</script>

<style scoped lang="scss">
#detailInfo{
  height:100%;
  display: flex;
  flex-direction:column;
  overflow: hidden;
  justify-content: space-between;
  @media screen and (max-height: 980px) {
    background: url("../../../assets/imgs/窄边.png") no-repeat;
  }
  @media screen and (min-height: 980px) {
    background: url("../../../assets/imgs/背景边框一体.png") no-repeat;
  }
  background-size: 100% !important;
  width:99%;
  margin-left: 0.5%;
  .content{
    width: 99%;
    height: 97%;
    padding-left: 1%;
    padding-top: 1.5%;
    .detail_header{
      width: 100%;
      height: 5%;
      background-color:transparent;
      padding:10px 0px 10px 20px;
    }
    .detail_content{
      width: 100%;
      background-color:transparent;
      padding:30px 10px 10px 20px;
      height: 90%;
      .little_title{
        color:#fff;
        font-size: 18px;
        font-weight: 700;
      }
      .form_content{
        padding-top: 20px;
        width:93%
      }
      .table-area{
        padding-top: 20px;
        max-height: 320px;
        overflow: hidden;
        width: 90%;
        padding-left: 3%;
      }
      .add-btn{
        color: #fff;
        box-sizing: border-box;
        border: 1px dashed #10a3ca;
        text-align: center;
        height: 40px;
        line-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        width: 90%;
        margin-left: 3%;
      }
      .btns{
        text-align: center;
        margin-top: 10px;
      }
    }

  }
  .dialog_button{
      border: transparent !important;
      padding-right: 10px !important;
  }
  .guide_body{
    color: #FFF;
    .item_title{
      font-size: 28px;
      font-weight: normal;
    }
    .situation_title{
      font-size: 18px;
      font-weight: normal;
    }
    .step_menu{
      width: 100%;
      height: 80px;
      display: flex;
      flex-direction: column;
      .step_top{
        width: 100%;
        height:40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        .single_step{
          width: 4.15%;
          height:100%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          .single_button{
            border:1px solid #2c91cc;
            width: 32px;
            height: 32px;
            border-radius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .single_button_active,.single_button:focus,.single_button:hover{
            background-color: #02ade4;
          }
        }
        .line{
          width: 9%;
          height:100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .step_bottom{
        width: 100%;
        height:40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .single_title{
          width: 13.15%;
          display: flex;
          justify-content: center;
          align-items: center;
          .single_remarks{
            font-size: 18px;
          }
        }
        .single_title_left{
          width: 9%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .single_remarks{
            font-size: 18px;
          }
        }
        .single_title_right{
          width: 9%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .single_remarks{
            font-size: 18px;
          }
        }
      }
    }
    .basic_info{
      width: 100%;
      height: 500px;
      overflow-y:auto;
      font-size: 14px;


      .basic_table{
        width: 100%;
        border-color: #2c91cc;
        margin: 10px 0 10px 0;
        .basic_tr{
          width: 100%;
          height: 50px;
          .td_title{
            width: 15%;
            background-color: rgb(5,30,94,0.85);

            padding-left: 10px;
          }
          .td_content{
            width: 35%;
          }
          .td_bottom_title{
            background-color: rgb(5,30,94,0.85);
            padding-left: 10px;
          }
          .td_bottom_content{
          }
        }
      }
      .step_info{
        width: 100%;
        height: 100%;
        .single_sqlc{
          display: flex;
          flex-direction: column;
          .sqlc_title{

            height: 50px;
            display: flex;
            align-items: center;
          }
          .sqlc_content{
            padding: 10px 20px 10px 20px;
          }
        }
      }
    }
  }
  ::v-deep{
    .el-button{
      //border: transparent;
      //padding-right: 10px;
    }
  }
}
</style>
