<template>
  <el-table
    :data="tableData"
    ref="tableRef"
    highlight-current-row
    border
  >
    <el-table-column type="expand" v-if="![10,11].includes(chartInfo.ChartType)">
      <template slot-scope="{row,$index}">
            <div class="expand-wrap">
                <div class="data-change">
                    <!-- 数据转换 -->
                    <el-checkbox v-model="updateData[$index].IsConvert">
                        {{ $t('EtaChartAddPage.data_transformation') }}
                    </el-checkbox>
                    <!-- 乘以/除以/对数 -->
                    <el-select v-model="updateData[$index].ConvertType">
                        <el-option :label="$t('EtaChartAddPage.multiply_by')" :value="1"></el-option>
                        <el-option :label="$t('EtaChartAddPage.divide_by')" :value="2"></el-option>
                        <el-option :label="$t('EtaChartAddPage.logarithm')" :value="3"></el-option>
                    </el-select>
                <el-input type="number" v-model="updateData[$index].ConvertValue"></el-input>
                </div>
                <div class="unit-change">
                    <label>{{ $t('Edb.Detail.e_unit') }}</label>
                    <el-input v-model="updateData[$index].ConvertUnit"></el-input>
                    <label>{{ $t('Edb.Detail.e_en_unit') }}</label>
                    <el-input v-model="updateData[$index].ConvertEnUnit"></el-input>
                </div>
                <!--柱形图:设置为图表单位-->
                <div class="use-change" v-if="chartInfo.ChartType===7">
                    <el-radio v-model="useUnit" :label="$index">{{ $t('EtaChartAddPage.chart_set_radio') }}</el-radio>
                </div>
                <div class="confirm-btn">
                    <el-button type="text" @click="changeTableData($index)">{{ $t('Dialog.confirm_save_btn') }}</el-button>
                </div>
            </div>
        </template>
    </el-table-column>
    <el-table-column
        v-for="item in tableColums"
        :key="item.label"
        :label="item.label"
        :width="item.widthsty"
        :min-width="item.minwidthsty"
        align="center"
    >
        <template slot-scope="scope">
            <div v-if="item.key === 'EdbName' && [1,4,6,7,11].includes(chartInfo.ChartType)">
                <!-- 柱状图用别名 -->
                <el-input 
                    v-model="scope.row.EdbAliasName"
                    :placeholder="$t('OnlineExcelPage.indicator_alias_lbl')"
                    class="target-other-name"
                    clearable
                />
            </div>
            <span v-else-if="item.key==='Frequency'">{{ getFrequencyTrans(scope.row.Frequency||'null') }}</span>
            <span v-else-if="item.key==='Unit'">{{ getUnitTrans(scope.row.Unit) }}</span>
            <span v-else>{{ scope.row[item.key] }}</span>
        </template>
    </el-table-column>
    <el-table-column
        :label="$t('Table.column_operations')"
        key="Copy"
        align="center"
        width="140"
    >
        <template slot-scope="scope" v-if="scope.row.HaveOperaAuth">
            <span @click="delTarget(scope.row)" class="deletesty"><!-- 删除 -->{{$t('Table.delete_btn')}}&nbsp;</span>
            <span v-permission="permissionBtn.chartLibPermission.chartLib_copyData"
                class="editsty" @click="copyCode(scope.row)">
                <i class="el-icon-document-copy" />&nbsp;<!-- 复制数据 -->{{$t('Edb.detail_copydata_btn')}}</span
            ><br>
            <span v-permission="permissionBtn.chartLibPermission.chartLib_viewData"
                class="editsty"
                @click="viewTarget(scope.row)"
            ><!-- 查看数据 -->{{$t('Edb.detail_lookdata_btn')}}</span>
        </template>
    </el-table-column>
    <div slot="empty">
            <tableNoData :text="$t('Table.no_edb_msg')" size="mini"/>
    </div>
</el-table>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      required:true
    },
    chartInfo: {
      type: Object,
      required:true
    },
    updateData: {
      type:Array
    }
  },
  computed:{
    tableColums(){
      return [
        {
          label: this.$t('Edb.Detail.e_name'),
          key: 'EdbName',
          enKey:'EdbNameEn',
          inputTip:'点击输入英文指标名称',
          minwidthsty: '150px',
        },
        {
          label: this.$t('Edb.Detail.e_id'),
          key: 'EdbCode',
          widthsty: '120px',
        },
        {
          label: this.$t('Edb.Detail.e_fre'),
          key: 'Frequency',
          enKey:'FrequencyEn',
          minwidthsty: '60px',
        },
        {
          label: this.$t('Edb.Detail.e_unit'),
          key: 'Unit',
          enKey:'UnitEn',
          inputTip:'英文单位',
          minwidthsty: '50px',
        },
        {
          label: this.$t('Edb.Detail.e_start_time'),
          key: 'StartDate',
          minwidthsty: '100px',
        },
        {
          label: this.$t('Edb.Detail.e_latest_date'),
          key: 'LatestDate',
          minwidthsty: '90px',
        },
        {
          label: this.$t('Edb.Detail.e_latest_value'),
          key: 'LatestValue',
          minwidthsty: '90px',
        },
        {
          label: this.$t('Edb.Detail.e_recent_time'),
          key: 'ModifyTime',
          minwidthsty: '100px',
        },
        {
          label: this.$t('Edb.Detail.source'),
          key: 'SourceName',
        },
      ]
    }
  },
  data() {
    return {
    }
  },
  mounted(){
  },
  methods:{
    changeTableData(index) {
      this.$emit('changeTableData',index)
    },
    
    delTarget(row) {
      this.$emit('delTarget',row)
    },

    copyCode(row) {
      this.$emit('copyCode',row)
    },

    viewTarget(row) {
      this.$emit('viewTarget',row)
    }
  },
}
</script>
<style scoped lang='scss'>

</style>
