<template>
  <el-dialog title="英文名称" :visible.sync="isOpenDialog" :close-on-click-modal="false" :modal-append-to-body='false'
       @close="cancel" custom-class="dialog" width="800px" v-dialogDrag>
      <el-form v-if="cType=='chart'" style="padding:0 40px" label-width="140px">
        <!-- 截面散点图 -->
        <div class="set-en-name-box" v-if="chartType===10">
          <el-collapse v-model="activeNames" class="sectionScatter-collapse">
            <el-collapse-item title="图表名称" :name="0" >
              <ul class="section-ul">
                <li v-if="copyFormData.chartInfo.length">
                  <div class="ch-name">图表名称：{{copyFormData.chartInfo[0].value}}</div>
                  <el-input v-model="copyFormData.chartInfo[1].value" placeholder="请输入英文名称" style="width: 600px;"/>
                </li>
                <li>
                  <div class="ch-name">X轴名称：{{updateInfo.XName}}</div>
                  <el-input v-model="updateInfo.XNameEn" placeholder="请输入英文名称" ></el-input>
                </li>
                <li>
                  <div class="ch-name">X轴单位：{{updateInfo.XUnitName}}</div>
                  <el-input v-model="updateInfo.XUnitNameEn" placeholder="请输入英文单位" ></el-input>
                </li>
                <li>
                  <div class="ch-name">Y轴名称：{{updateInfo.YName}}</div>
                  <el-input v-model="updateInfo.YNameEn" placeholder="请输入英文名称" ></el-input>
                </li>
                <li>
                  <div class="ch-name">Y轴单位：{{updateInfo.YUnitName}}</div>
                  <el-input v-model="updateInfo.YUnitNameEn" placeholder="请输入英文单位" ></el-input>
                </li>

              </ul>
            </el-collapse-item>
            
            <!-- 系列标签 -->
            <el-collapse-item title="标签，系列名称" :name="1" v-if="updateInfo.SeriesList">
              <ul class="section-ul">
                <li v-for="(item,index) in updateInfo.SeriesList" :key="index">
                  <div class="ch-name">系列{{index+1}}：{{item.Name}}</div>
                  <el-input v-model="item.NameEn" placeholder="请输入英文名称" ></el-input>
                </li>
              </ul>  
              <ul class="section-ul">
                <li v-for="(tag,index) in updateInfo.SeriesList[0].EdbInfoList" :key="index">
                  <div class="ch-name">标签{{index+1}}：{{tag.Name}}</div>
                  <el-input v-model="tag.NameEn" placeholder="请输入英文名称" ></el-input>
                </li>
              </ul>
            </el-collapse-item>

            <!-- 指标英文 -->
            <el-collapse-item title="指标名称" :name="2">
              <ul class="section-ul">
                <li v-for="(item,index) in fromEdbList" :key="index">
                  <div class="ch-name text_oneLine">{{item.EdbName}}</div>
                  <el-input v-model="item.EdbNameEn" placeholder="请输入英文名称" ></el-input>
                </li>
              </ul>  
            </el-collapse-item>  
          </el-collapse>
        </div>

        <!-- 普通图 -->
        <div class="set-en-name-box" v-else>
          <el-form-item :label="item.label+'：'" :prop="item.key" v-for="item in copyFormData.chartInfo" :key="item.key">
            <span v-show="item.notEdit">{{item.value}}</span>
            <el-input v-show="!item.notEdit" v-model="item.value" :placeholder="item.placeholder" ></el-input>
          </el-form-item>
          <el-collapse v-model="activeNames" v-if="copyFormData.chartsList.length">
            <el-collapse-item :title="item[0].value" :name="index" v-for="(item,index) in copyFormData.chartsList" :key="index">
              <el-form-item :label="it.label+'：'" :prop="it.key"  v-for="(it,i) in item" :key="it.key">
                <span v-show="it.notEdit">{{it.value}}</span>
                <el-input v-show="!it.notEdit" v-model="it.value" :placeholder="it.placeholder" ></el-input>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </div>
				<el-form-item style="text-align: center;margin-top: 30px;">
					<el-button type="primary" @click="saveEnName">保存</el-button>
					<el-button @click="cancel">取消</el-button>
				</el-form-item>
			</el-form>
			<el-form v-else label-width="110px" >
				<el-form-item :label="item.label+'：'" :prop="item.key" v-for="item in copyFormData" :key="item.key">
					<span v-show="item.notEdit">{{item.value}}</span>
          <el-input v-show="!item.notEdit" v-model="item.value" :placeholder="item.placeholder" style="width: 100%;"></el-input>
				</el-form-item>
				<el-form-item style="text-align: center;">
					<el-button @click="cancel">取消</el-button>
					<el-button type="primary" @click="saveEnName">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
</template>
<script>
export default {
  name:"setEnName",
  data() {
    return {
      enNameData:{
        ChartInfoId:'',
        ChartNameEn:'',
        ChartEdbInfoList:[

        ]
      },
      copyFormData:{
        chartInfo:[],
        chartsList:[]
      },
      activeNames: [0],

      fromEdbList: [],
      updateInfo: {}
    }
  },
  props:{
    cType:{
      type:String,
      default:'chart'
    },
    isOpenDialog:{
      type:Boolean,
      required:true,
      default:false
    },
    formData:{
      type:Array,
      required:true,
      default:[]
    },
    chartType: {
      type: Number
    },
    datainfo: {
      default: null
    },
    edblist: {
      default: []
    }
  },
  watch:{
    isOpenDialog(newVal){
      // 默认展开第一项
      if(newVal){
        this.activeNames=[0]
        this.copyFormData = _.cloneDeep(this.formData);

        this.fromEdbList = _.cloneDeep(this.edblist);
        this.updateInfo = _.cloneDeep(this.datainfo);
      }
    }
  },
  methods:{
    cancel(){
      this.copyFormData={
        chartInfo:[],
        chartsList:[]
      }
      this.$emit('cancel')
    },

    /* 截面散点图设置英文 */
    setSectionScatterEn(){
      let ChartEdbInfoList = this.fromEdbList.map( _ => ({
        EdbInfoId: _.EdbInfoId,
        EdbNameEn: _.EdbNameEn,
        UnitEn: _.UnitEn
      }))
      this.updateInfo.SeriesList.forEach((item,index) => {
        if(index) {
          item.EdbInfoList.forEach((edb,edb_index) => {
            const {NameEn} = this.updateInfo.SeriesList[0].EdbInfoList[edb_index];
            edb.NameEn= NameEn;
          })
        }
      })
      
      let ExtraConfig = JSON.stringify(this.updateInfo);
      let params = {
        ChartInfoId: this.copyFormData.chartInfo[1].id,
        ChartNameEn: this.copyFormData.chartInfo[1].value.trim(),
        ChartEdbInfoList,
        ExtraConfig
      }
      this.$emit('updateEnName',params)
    },

    saveEnName(){
      if(this.cType === 'chart'&&this.chartType === 10) return this.setSectionScatterEn();
      if(JSON.stringify(this.copyFormData) === JSON.stringify(this.formData)){
        // 没有修改过
        this.$emit('cancel')
        return
      }
      console.log(this.cType);
      if(this.cType == 'chart'){

        // 表格
        this.enNameData.ChartInfoId = this.copyFormData.chartInfo[1].id // 表格ID
        this.enNameData.ChartNameEn = this.copyFormData.chartInfo[1].value.trim() // 表格英文名称
        if(this.copyFormData.chartInfo[3]) {
          if(this.copyFormData.chartInfo[3].key==='FutureGoodNameEn') {
            this.enNameData.FutureGoodNameEn = this.copyFormData.chartInfo[3].value.trim() // 期货英文名称
          }else if(this.copyFormData.chartInfo[3].key==='ProfitNameEn') {
            this.enNameData.ProfitNameEn = this.copyFormData.chartInfo[3].value.trim() // 利润英文名称
          }
        }
        let chartEdbInfoListTem=[]
        this.copyFormData.chartsList.map((item,index)=>{
          let params ={}
          params.EdbInfoId = item[0].id
          item.filter(it => !it.notEdit) .map((it,i)=>{
            params[it.key] = it.value
          })
          chartEdbInfoListTem.push(params)
        })
        this.enNameData.ChartEdbInfoList=chartEdbInfoListTem
        this.$emit('updateEnName',this.enNameData)
      }else{
        // 指标库
        let params={}
        this.copyFormData.filter(it => !it.notEdit).map(item => {
            params[item.key] = item.value.trim()
        })
        // console.log(params);
        this.$emit('updateEnName',params)
      }
    }
  }
}
</script>
<style lang="scss">
.set-en-name-box{
  max-height:600px;
  overflow-y:auto;
  .el-collapse-item__header{
    background-color:#DCDFE6;
    padding-left:8px;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    margin-bottom:0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    overflow: hidden;
    line-height: inherit;
    .el-collapse-item__arrow{
      margin-left: 12px;
    }
  }
  .el-input{
    width: 100%;
  }
  .el-collapse-item__content{
    padding:18px 8px 0 8px;
  }
}


</style>
<style scoped lang="scss">
  .section-ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      margin-bottom: 20px;
      .ch-name {
        margin-bottom: 10px;
        width: 250px;
      }
      .el-input {  min-width: 240px;}
    }
  }
</style>