<template>
  <el-dialog
      :close-on-click-modal ="false"
      :title="title"
      :top="dialogFromTop"
      :visible.sync = "dialogVisible"
      :destroy-on-close = "true"
      width="35%"
      :model="false"
      :before-close="handleClose"
  >
    <div class="dialog-content">
      <div class="tabs">
        <div class="tab_item" :class="{'active':activeId === item.id}" @click="changeActiveId(item.id)" v-for="item in tabList" :key="item.id">
          <span>{{item.name}}</span>
        </div>
      </div>
      <div class="tab-content">
        <div v-if="activeId==='0001'">
          <el-col :span="24">
            <el-form ref="resource_category_form" :model="resource_category_form" size="small" :disabled=true label-width="100px">
              <el-col :span="12">
                <el-form-item label="资源名称：">
                  <el-input  v-model="resource_category_form.lb_zymc"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发布单位：">
                  <el-input  v-model="resource_category_form.lb_fbdw"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="资源分类：">
                  <el-input  v-model="resource_category_form.lb_zyfl"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="行业大类：">
                  <el-input  v-model="resource_category_form.lb_hydl"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="资源中类：">
                  <el-input  v-model="resource_category_form.lb_zyzl"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="资源小类：">
                  <el-input  v-model="resource_category_form.lb_zyxl"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发布人员：">
                  <el-input  v-model="resource_category_form.lb_fbry"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发布时间：">
                  <el-input  v-model="resource_category_form.lb_fbsj"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="更新人员：">
                  <el-input  v-model="resource_category_form.lb_gxry"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="更新时间：">
                  <el-input  v-model="resource_category_form.lb_gxsj"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="资源说明：">
                  <el-input  :rows="3" type="textarea" v-model="resource_category_form.lb_zysm"></el-input>
                </el-form-item>
              </el-col>
            </el-form>
          </el-col>
        </div>
        <div v-if="activeId==='0002'" class="origion">
          <div class="origion_left">
            <div class="left_title">
              <span class="title">元数据结构</span>
              <img  class="title_icon" src="../../../../../assets/imgs/mainPage/倒三角.png"/>
            </div>
            <div class="origion_item" :class="{'active':origionId===item.id}" @click="changeOrigionId(item.id)" v-for="item in origionConstructionList" :key="item.id">
              <span>{{item.name}}</span>
            </div>
          </div>
          <el-divider  direction="vertical"></el-divider>
          <div class="origion_right">
            <div v-if="origionId ==='bmxx'">
              <el-col :span="24">
                <el-form ref="resource_category_form" :model="origion_data_form" size="small" :disabled=true label-width="140px">
                  <el-col :span="24">
                    <el-form-item label="资源编码：">
                      <el-input  v-model="origion_data_form.lb_zybm"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="元数据编码：">
                      <el-input  v-model="origion_data_form.lb_ysjbm"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="数据集中文全称：">
                      <el-input  v-model="origion_data_form.lb_zwqc"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="数据集英文全称：">
                      <el-input  v-model="origion_data_form.lb_ywqc"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="版本号：">
                      <el-input  v-model="origion_data_form.lb_bbh"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="出版日期：">
                      <el-input  v-model="origion_data_form.lb_cbrq"></el-input>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-col>
            </div>
            <div v-if="origionId ==='sjsjnrxx'">
              <el-col :span="24">
                <el-form ref="resource_category_form" :model="origion_data_form" size="small" :disabled=true label-width="140px">
                  <el-col :span="24">
                    <el-form-item label="摘要：">
                      <el-input  v-model="origion_data_form.lb_zhaiyao"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="目的：">
                      <el-input  v-model="origion_data_form.lb_mudi"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="进展：">
                      <el-input  v-model="origion_data_form.lb_jinzhan"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="维护及更新频率：">
                      <el-input  v-model="origion_data_form.lb_gxpl"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="专题分类：">
                      <el-input  v-model="origion_data_form.lb_ztfl"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="关键字：">
                      <el-input  v-model="origion_data_form.lb_gjz"></el-input>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-col>
            </div>
            <div v-if="origionId ==='sjsm'">
              <el-col :span="24">
                <el-form ref="resource_category_form" :model="origion_data_form" size="small" :disabled=true label-width="140px">
                  <el-col :span="24">
                    <el-form-item label="比例尺：">
                      <el-input  v-model="origion_data_form.lb_blc"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="分辨率：">
                      <el-input  v-model="origion_data_form.lb_fbl"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="空间数据表现类型：">
                      <el-input  v-model="origion_data_form.lb_bxlx"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="数据格式：">
                      <el-input  v-model="origion_data_form.lb_sjgs"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="数据集语言：">
                      <el-input  v-model="origion_data_form.lb_sjjyy"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="数据维度：">
                      <el-input  v-model="origion_data_form.lb_sjwd"></el-input>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-col>
            </div>
            <div v-if="origionId ==='dlfw'">
              <el-col :span="24">
                <el-form ref="resource_category_form" :model="origion_data_form" size="small" :disabled=true label-width="140px">
                  <el-col :span="24">
                    <el-form-item label="西部边界坐标：">
                      <el-input  v-model="origion_data_form.lb_west"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="东部边界坐标：">
                      <el-input  v-model="origion_data_form.lb_east"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="南部边界坐标：">
                      <el-input  v-model="origion_data_form.lb_south"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="北部边界坐标：">
                      <el-input  v-model="origion_data_form.lb_north"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="地理区域名称：">
                      <el-input  v-model="origion_data_form.lb_dlqy"></el-input>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-col>
            </div>
            <div v-if="origionId ==='fzzrdw'">
              <el-col :span="24">
                <el-form ref="resource_category_form" :model="origion_data_form" size="small" :disabled=true label-width="140px">
                  <el-col :span="24">
                    <el-form-item label="单位名称：">
                      <el-input  v-model="origion_data_form.lb_dwmc"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="单位祥址：">
                      <el-input  v-model="origion_data_form.lb_dwxz"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="负责人名称：">
                      <el-input  v-model="origion_data_form.lb_fzr"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="邮政编码：">
                      <el-input  v-model="origion_data_form.lb_yzbm"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="电子邮箱：">
                      <el-input  v-model="origion_data_form.lb_dzyx"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="电话号码：">
                      <el-input  v-model="origion_data_form.lb_dhhm"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="传真号码：">
                      <el-input  v-model="origion_data_form.lb_czhm"></el-input>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-col>
            </div>
            <div v-if="origionId ==='xzxx'">
              <el-col :span="24">
                <el-form ref="resource_category_form" :model="origion_data_form" size="small" :disabled=true label-width="140px">
                  <el-col :span="24">
                    <el-form-item label="访问限制：">
                      <el-input  v-model="origion_data_form.lb_fwxz"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="使用限制：">
                      <el-input  v-model="origion_data_form.lb_syxz"></el-input>
                    </el-form-item>
                  </el-col>


                </el-form>
              </el-col>
            </div>
          </div>
        </div>
        <div v-if="activeId==='0003'" class="resource_service">
          <div class="resource_service_title">
            <p>服务概况</p>
            <el-divider></el-divider>
          </div>
          <div class="resource_service_content">
            <el-col :span="24">
              <el-form ref="resource_category_form" :model="resource_service_form" size="small" :disabled=true label-width="100px">
                <el-col :span="24">
                  <el-form-item label="服务名称：">
                    <el-input  v-model="resource_service_form.lb_fwmc"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="所属单位：">
                    <el-input  v-model="resource_service_form.lb_ssdw"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="更新时间：">
                    <el-input  v-model="resource_service_form.lb_gxsj1"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="服务类型：">
                    <el-input  v-model="resource_service_form.lb_fwlx"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="服务地址：">
<!--                    <el-input  v-model="resource_service_form.lb_fwdz"></el-input>-->
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-col>
          </div>
        </div>
      </div>
    </div>


  </el-dialog>
</template>

<script>
  import {selectDirectiorById, selectMetadataId,selectServiceDetail} from "@/service/interfaceKoolkit";

  export default {
  name: "SingleLayerDetailModel",
  props:{
    dialogVisible:{
      type:Boolean
    },
    title:{

    }
  },
  data(){
    return{
      dialogFromTop:'12vh',
      layerCode:'',  //查询详情所用的CODE
      activeId:'0002',
      origionId:'bmxx',
      tabList:[
        {
          id:'0001',
          name:'资源目录'
        },
        {
          id:'0002',
          name:'元数据'
        },
        {
          id:'0003',
          name:'资源服务'
        },
      ],
      resource_category_form:{
        lb_zymc:'', //资源名称
        lb_fbdw:'', //发布单位
        lb_zyfl:'', //资源分类
        lb_hydl:'', //行业大类
        lb_zyzl:'', //资源中类
        lb_zyxl:'', //资源小类
        lb_fbry:'', //发布人员
        lb_fbsj:'', //发布时间
        lb_gxry:'', //更新人员
        lb_gxsj:'', //更新时间
        lb_zysm:'', //资源说明
      },
      origion_data_form:{
        lb_zybm:'',//资源编码
        lb_ysjbm:'',//元数据编码
        lb_zwqc:'',//数据集中文全称
        lb_ywqc:'',//数据集英文全称
        lb_bbh:'',//版本号
        lb_cbrq:'',//出版日期

        lb_zhaiyao:'',//摘要
        lb_mudi:'',//目的
        lb_jinzhan:'',//进展
        lb_gxpl:'',//维护及更新频率
        lb_ztfl:'',//专题分类
        lb_gjz:'',//关键字

        lb_blc:'',//比例尺
        lb_fbl:'',//分辨率
        lb_bxlx:'',//空间数据表现类型
        lb_sjgs:'',//数据格式
        lb_sjjyy:'',//数据集语言
        lb_sjwd:'',//数据维度

        lb_west:'',//西部边界坐标
        lb_east:'',//东部边界坐标
        lb_south:'',//南部边界坐标
        lb_north:'',//北部边界坐标
        lb_dlqy:'',//地理区域名称

        lb_dwmc:'',//单位名称
        lb_dwxz:'',//单位祥址
        lb_fzr:'',//负责人名称
        lb_yzbm:'',//邮政编码
        lb_dzyx:'',//电子邮箱
        lb_dhhm:'',//电话号码
        lb_czhm:'',//传真号码

        lb_fwxz:'',//访问限制
        lb_syxz:'',//使用限制
      },
      resource_service_form:{
        lb_fwmc:'', //服务名称
        lb_ssdw:'', //所属单位
        lb_gxsj1:'', //更新时间
        lb_fwlx:'', //服务类型
        lb_fwdz:'', //服务地址
      },
      origionConstructionList:[
        {
          id:'bmxx',
          name:'编目信息'
        },
        {
          id:'sjsjnrxx',
          name:'数据收集内容信息'
        },
        {
          id:'sjsm',
          name:'数据说明'
        },
        {
          id:'dlfw',
          name:'地理范围'
        },
        {
          id:'fzzrdw',
          name:'负责责任单位'
        },
        {
          id:'xzxx',
          name:'限制信息'
        }
      ]
    }
  },
  mounted() {
    debugger
    // this.selectDirectiorById(this.layerCode);
    // this.selectMetadataId(this.layerCode);
    // this.selectServiceDetail(this.layerCode);
  },
  methods:{
    changeActiveId(id){
      this.activeId = id;
    },
    changeOrigionId(id){
      this.origionId = id;
    },
    handleClose() {
      this.$emit('update:dialogVisible',false)
    },selectDirectiorById(code){
      this.resource_category_form.lb_zymc=''; //资源名称
      this.resource_category_form.lb_fbdw=''; //发布单位
      this.resource_category_form.lb_zyfl=''; //资源分类
      this.resource_category_form.lb_hydl=''; //行业大类
      this.resource_category_form.lb_zyzl=''; //资源中类
      this.resource_category_form.lb_zyxl=''; //资源小类
      this.resource_category_form.lb_fbry=''; //发布人员
      this.resource_category_form.lb_fbsj=''; //发布时间
      this.resource_category_form.lb_gxry=''; //更新人员
      this.resource_category_form.lb_gxsj=''; //更新时间
      this.resource_category_form.lb_zysm=''; //资源说明
      selectDirectiorById(code).then(response => {
        let dataArr = response.msg[0].Rows;
        if(dataArr.length > 0){
          this.resource_category_form.lb_zymc=dataArr[0]["NAME"];//资源名称
          this.resource_category_form.lb_fbdw=dataArr[0]["UNITNAME"]; //发布单位
          this.resource_service_form.lb_ssdw=dataArr[0]["UNITNAME"]; //发布单位
          this.resource_category_form.lb_zyfl=dataArr[0]["M_TYPE"]; //资源分类
          this.resource_category_form.lb_hydl=dataArr[0]["CLASSNAME"]; //行业大类
          this.resource_category_form.lb_zyzl=dataArr[0]["DIVISIONNAME"]; //资源中类
          this.resource_category_form.lb_zyxl=dataArr[0]["SECTIONNAME"]; //资源小类
          this.resource_category_form.lb_fbry=dataArr[0]["USERNAME"]; //发布人员
          this.resource_category_form.lb_fbsj=dataArr[0]["REG_TIME"] == null ? "" : dataArr[0]["REG_TIME"].toString().substr(0,16); //发布时间
          this.resource_category_form.lb_gxry=dataArr[0]["UPDATE_USERNAME"]; //更新人员
          this.resource_category_form.lb_gxsj=dataArr[0]["UPDATE_TIME"]== null ? "" : dataArr[0]["UPDATE_TIME"].toString().substr(0,16);//更新时间
          this.resource_category_form.lb_zysm=dataArr[0]["DES"]; //资源说明
        }
      });

    },selectMetadataId(code){
      this.origion_data_form.lb_zybm='';//资源编码
      this.origion_data_form.lb_ysjbm='';//元数据编码
      this.origion_data_form.lb_zwqc='';//数据集中文全称
      this.origion_data_form.lb_ywqc='';//数据集英文全称
      this.origion_data_form.lb_bbh='';//版本号
      this.origion_data_form.lb_cbrq='';//出版日期

      this.origion_data_form.lb_zhaiyao='';//摘要
      this.origion_data_form.lb_mudi='';//目的
      this.origion_data_form.lb_jinzhan='';//进展
      this.origion_data_form.lb_gxpl='';//维护及更新频率
      this.origion_data_form.lb_ztfl='';//专题分类
      this.origion_data_form.lb_gjz='';//关键字

      this.origion_data_form.lb_blc='';//比例尺
      this.origion_data_form.lb_fbl='';//分辨率
      this.origion_data_form.lb_bxlx='';//空间数据表现类型
      this.origion_data_form.lb_sjgs='';//数据格式
      this.origion_data_form.lb_sjjyy='';//数据集语言
      this.origion_data_form.lb_sjwd=''//数据维度

      this.origion_data_form.lb_west='';//西部边界坐标
      this.origion_data_form.lb_east='';//东部边界坐标
      this.origion_data_form.lb_south='';//南部边界坐标
      this.origion_data_form.lb_north='';//北部边界坐标
      this.origion_data_form.lb_dlqy='';//地理区域名称

      this.origion_data_form.lb_dwmc='';//单位名称
      this.origion_data_form.lb_dwxz='';//单位祥址
      this.origion_data_form.lb_fzr='';//负责人名称
      this.origion_data_form.lb_yzbm='';//邮政编码
      this.origion_data_form.lb_dzyx='';//电子邮箱
      this.origion_data_form.lb_dhhm='';//电话号码
      this.origion_data_form.lb_czhm='';//传真号码

      this.origion_data_form.lb_fwxz='';//访问限制
      this.origion_data_form.lb_syxz='';//使用限制
      selectMetadataId(code).then(response => {
        let dataArr = response.msg[0].Rows;
        if(dataArr.length > 0){
          this.origion_data_form.lb_zybm=dataArr[0]["CODE_DIR"];//资源编码
          this.origion_data_form.lb_ysjbm=dataArr[0]["CODE"];//元数据编码
          this.origion_data_form.lb_zwqc=dataArr[0]["FCHNAME"];//数据集中文全称
          this.origion_data_form.lb_ywqc=dataArr[0]["FEGNAME"];//数据集英文全称
          this.origion_data_form.lb_bbh=dataArr[0]["VERSION"];//版本号
          this.origion_data_form.lb_cbrq=dataArr[0]["PUBLISH"];//出版日期

          this.origion_data_form.lb_zhaiyao=dataArr[0]["ABSTRACT"];//摘要
          this.origion_data_form.lb_mudi=dataArr[0]["PURPOSE"];//目的
          this.origion_data_form.lb_jinzhan=dataArr[0]["PROGRESS"];//进展
          this.origion_data_form.lb_gxpl=dataArr[0]["UPDATEFREQUENCY"];//维护及更新频率
          this.origion_data_form.lb_ztfl=dataArr[0]["TITLE"];//专题分类
          this.origion_data_form.lb_gjz=dataArr[0]["KEYWORDS"];//关键字

          this.origion_data_form.lb_blc=dataArr[0]["SCALE"];//比例尺
          this.origion_data_form.lb_fbl=dataArr[0]["PPI"];//分辨率
          this.origion_data_form.lb_bxlx=dataArr[0]["KJDATATYPE"];//空间数据表现类型
          this.origion_data_form.lb_sjgs=dataArr[0]["DATATYPE"];//数据格式
          this.origion_data_form.lb_sjjyy=dataArr[0]["DATALANGUAGE"];//数据集语言
          this.origion_data_form.lb_sjwd=dataArr[0]["DATA_DIMENSION"];//数据维度


          this.origion_data_form.lb_west=dataArr[0]["WEST"];//西部边界坐标
          this.origion_data_form.lb_east=dataArr[0]["EAST"];//东部边界坐标
          this.origion_data_form.lb_south=dataArr[0]["SOUTH"];//南部边界坐标
          this.origion_data_form.lb_north=dataArr[0]["NORTH"];//北部边界坐标
          this.origion_data_form.lb_dlqy=dataArr[0]["DISTRICT_NAME"];//地理区域名称

          this.origion_data_form.lb_dwmc=dataArr[0]["U_NAME"];//单位名称
          this.origion_data_form.lb_dwxz=dataArr[0]["ADDRESS"];//单位祥址
          this.origion_data_form.lb_fzr=dataArr[0]["MANAGER"];//负责人名称
          this.origion_data_form.lb_yzbm=dataArr[0]["ZIPCODE"];//邮政编码
          this.origion_data_form.lb_dzyx=dataArr[0]["MAIL"];//电子邮箱
          this.origion_data_form.lb_dhhm=dataArr[0]["TELEPHONE"];//电话号码
          this.origion_data_form.lb_czhm=dataArr[0]["FAXNUM"];//传真号码

          this.origion_data_form.lb_fwxz=dataArr[0]["CALLABLE"];//访问限制
          this.origion_data_form.lb_syxz=dataArr[0]["USABLE"];//使用限制
        }
      });
    },selectServiceDetail(code){
      this.resource_service_form.lb_fwmc=''; //服务名称
      this.resource_service_form.lb_ssdw='';//所属单位
      this.resource_service_form.lb_gxsj1=''; //更新时间
      this.resource_service_form.lb_fwlx=''; //服务类型
      this.resource_service_form.lb_fwdz=''; //服务地址
      selectServiceDetail(code).then(response => {
        let dataArr = response.msg[0].Rows;
        if(dataArr.length > 0){
          this.resource_service_form.lb_fwmc=dataArr[0]["NAME"]; //服务名称
          this.resource_service_form.lb_gxsj1=dataArr[0]["CREATE_TIME"] == null ? "" : dataArr[0]["CREATE_TIME"].toString().substr(0,16);//更新时间
          switch(dataArr[0]["SERVICE_TYPE"].toString()){
            case "1"://动态服务
              this.resource_service_form.lb_fwlx="动态服务";
              break;
            case "2"://切片服务
              this.resource_service_form.lb_fwlx="切片服务";
              break;
            case "3"://三维服务
              this.resource_service_form.lb_fwlx="三维服务";
              break;
          }
          this.resource_service_form.lb_fwdz=dataArr[0]["ADDRESS"]; //服务地址

        }
      });

    }
  },
    watch:{
      dialogVisible(){
        this.selectDirectiorById(this.layerCode);
        this.selectMetadataId(this.layerCode);
        this.selectServiceDetail(this.layerCode);
      }
    }

}
</script>

<style scoped lang="scss">
::v-deep{
  .el-dialog{
    background: rgba(0, 38, 115, 0.6);
    border: 1px solid #00AAFF;
    border-radius: 4px;

  }
  .el-dialog__title{
    color: #fff;
  }
  .el-dialog__headerbtn .el-dialog__close{
    color: #fff;
  }
  .el-dialog__body{
    padding: 5px;
  }
  .el-form-item__label{
    color: #fff;
  }
  .el-input.is-disabled .el-input__inner,.el-textarea.is-disabled .el-textarea__inner{
    background: rgba(21, 40, 88, 0.6);
    border: 1px solid #00AAFF;
    color: #bae4ff;
  }
  .el-divider--vertical{
    height: 350px;
    background: 0 0;
    border-left: 1px dashed #fff;
  }
  .el-divider{
    background: 0 0;
    border-top: 1px dashed #fff;
  }
}
.dialog-content{
  width: 100%;
  height:420px;
  .tabs{
    display: flex;
    justify-content: space-around;
    font-size: 18px;
    .tab_item{
      cursor: pointer;
      color: #fff;
      width: 156px;
      height: 30px;
      background: rgba(27, 77, 148, 0.6);
      border-radius: 4px;
      border:none;
      box-sizing:border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      align-self: center;
      &.active{
        color: #ffbf00;
        background: -webkit-gradient(linear, 0 0, 0 bottom, from(#54aef3), to(#187cc8));
      }
    }
  }
  .tab-content{
    color: #fff;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    .origion{
      display: flex;
      justify-content: center;
      .origion_left{
        width: 30%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .left_title{
          display: flex;
          justify-content: center;
          .title{
            font-size: 16px;
          }
          .title_icon{
            width: 25px;
            padding-left: 15px;
          }
        }
        .origion_item{
          background: rgba(27, 77, 148, 0.6);
          border-radius: 4px;
          border: none;
          width: 186px;
          height: 40px;
          cursor: pointer;
          display: flex;
          display: flex;
          align-items: center;
          justify-content: center;
          &.active{
            color: #ffbf00;
            background:-webkit-gradient(linear, 0 0, 0 bottom, from(#54aef3), to(#187cc8));
          }
        }
      }
      .origion_right{
        width: 66%;
      }
    }
    .resource_service{
      display: flex;
      flex-direction: column;
      .resource_service_content{
        display: flex;
        flex-direction: column;

      }
    }
  }
}
</style>
