<!--
 * @Date: 2024-03-22 15:28:54
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-04-03 18:41:11
 * @FilePath: /custom_dashboard/src/components/DataSource.vue
 * @Description: 文件描述
-->
<template>
  <div class="data-source-page">
    <el-drawer
      id="data-source-drawer"
      :with-header="false"
      :visible.sync="show"
      :show-close="false"
      direction="rtl"
      size="100%">
      <div :style="{ height: headerHeight + 'px' }" class="list-header">
        <div style=" display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
          <div class="btn">
            <el-button type="text" size="mini" @click="closeDrawer">关闭</el-button>
          </div>
          <div class="title">数据源列表</div>
          <div class="btn">
            <el-button type="text" size="mini" @click="addDataSource">添加数据源</el-button>
          </div>
        </div>
        <div style="margin-top: 1rem;">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="名称">
              <el-input v-model="formInline.name" placeholder="请输入数据源名称"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-select v-model="formInline.chart_mode" multiple placeholder="请选择图表类型">
                <el-option v-for="(item, index) in chart_mode" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formInline.status" multiple placeholder="请选择数据源状态">
                <el-option v-for="(item, index) in data_status" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearchSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div>
        <vxe-table
          :style="{ marginTop: headerHeight + 'px' }"
          :loading="loading"
          stripe
          border
          resizable
          row-key
          show-header-overflow
          show-overflow
          highlight-hover-row
          :align="allAlign"
          :data="tableData"
          :height="tableHeight"
        >
          <vxe-table-column type="seq" width="60"></vxe-table-column>
          <vxe-table-column field="name" title="名称" show-overflow="tooltip"></vxe-table-column>
          <vxe-table-column field="note" title="描述" show-overflow="tooltip"></vxe-table-column>
          <vxe-table-column field="chart_mode" title="类型" width="100" :formatter="formatterMode"></vxe-table-column>
          <vxe-table-column field="status" title="状态" width="80" :formatter="formatterStatus"></vxe-table-column>
          <vxe-table-column title="操作" width="120">
            <template #default="{ row }">
              <vxe-button type="text" icon="vxe-icon-edit" @click="editDataItem(row)"></vxe-button>
              <vxe-button type="text" icon="vxe-icon-copy" @click="copyDataItem(row)"></vxe-button>
              <vxe-button type="text" icon="vxe-icon-delete" @click="deleteDataItem(row)"></vxe-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          :current-page.sync="pager.currentPage"
          :page-size.sync="pager.pageSize"
          :total="pager.totalResult"
          @page-change="pageChange"
          :layouts="['PrevPage', 'Number', 'NextPage', 'Total']">
        </vxe-pager>
      </div>
    </el-drawer>

    <el-drawer
      :with-header="false"
      :visible.sync="drawer"
      :direction="direction"
      size="90%"
      :wrapperClosable="false"
      :close-on-press-escape="false"
    >
      <div style="text-align: center; margin: 1rem; font-size: 1.15rem;">数据源详情</div>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" style="padding: 1rem;">
        <el-form-item label="数据源名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="数据源描述" prop="note">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入数据源描述"
            v-model="form.note">
          </el-input>
        </el-form-item>
        <el-form-item label="SQL语句" prop="sql">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 8 }"
            placeholder="请自行确保sql语句能正确运行"
            v-model="form.sql">
          </el-input>
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="图表类型" prop="chart_mode">
              <el-select v-model="form.chart_mode" placeholder="请选择图表类型" style="width: 100%;">
                <el-option v-for="(item, index) in chart_mode" :key="index" :label="item.label" :value="item.value">
                  <span style="float: left">{{ item.label }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.note }}</span>
                </el-option>
              </el-select>
              <!-- <p v-if="form.chart_mode === item.value" v-for="(item, index) in chart_mode" :key="index" style="font-size: 0.8rem; padding-left: 0.2rem;">{{ item.note }}</p> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据源状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择数据源状态" style="width: 100%;">
                <el-option v-for="(item, index) in data_status" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-form-item label="维度字段" prop="dimension_tags">
          <el-tag
            :key="tag"
            v-for="tag in form.dimension_tags"
            closable
            :disable-transitions="false"
            @close="handleDimensionClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="dimension_input_visible"
            v-model="dimension_input_value"
            ref="dimensionSaveTagInput"
            size="small"
          >
          </el-input>
          <el-button v-if="dimension_input_visible" class="button-new-tag" size="small" @click="addDimension">新增</el-button>
        </el-form-item>
        <el-form-item label="指标字段" prop="metrics_tags">
          <el-tag
            :key="tag"
            v-for="tag in form.metrics_tags"
            closable
            :disable-transitions="false"
            @close="handleMetricsClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="metrics_input_visible"
            v-model="metrics_input_value"
            ref="metricsSaveTagInput"
            size="small"
          >
          </el-input>
          <el-button v-if="metrics_input_visible" class="button-new-tag" size="small" @click="addMetrics">新增</el-button>
        </el-form-item>
        <el-form-item label="静态数据" prop="is_dynamic">
          <el-switch v-model="form.is_dynamic" active-text="是" inactive-text="否" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>
        <!--<el-form-item
          v-for="(item, index) in form.filter_params"
          :key="index" :label="'查询条件 '+ (index+1)"
        >
          <el-row :gutter="10">
            <el-col :span="7">
              <el-input v-model="item.name" placeholder="请输入显示名称"></el-input>
            </el-col>
            <el-col :span="6">
              <el-select v-model="item.type" placeholder="请选择数据类型" style="width: 100%;">
                <el-option label="字符型" value="string"></el-option>
                <el-option label="数字型" value="number"></el-option>
                <el-option label="日期型" value="datetime"></el-option>
              </el-select>
            </el-col>
            <el-col :span="9">
              <el-input v-if="item.type === 'string'" v-model="item.value" placeholder="请输入条件值"></el-input>
              <el-input v-if="item.type === 'number'" type="number" v-model="item.value" placeholder="请输入条件值"></el-input>
              <!~~ <el-input v-if="item.type === 'datetime'" placeholder="请输入内容" v-model="item.value">
                <el-select v-model="select" slot="append" placeholder="请选择" style="width: 110px;">
                  <el-option label="日期选择" value="1"></el-option>
                  <el-option label="动态筛选" value="2"></el-option>
                </el-select>
              </el-input> ~~>
              <div v-if="item.type === 'datetime'">
                <el-col :span="12">
                  <el-form-item>
                    <el-select v-model="item.select_type" @change="changeDateType(item)" placeholder="请选择" style="width: 100%;">
                      <el-option label="日期选择" value="date_selection"></el-option>
                      <!~~ <el-option label="日期范围" value="date_range"></el-option> ~~>
                      <el-option label="动态筛选" value="dynamic_filtering"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item v-if="item.select_type === 'date_selection'">
                    <el-date-picker
                      v-model="item.value"
                      type="date"
                      placeholder="选择日期"
                      style="width: 100%;"
                      value-format="yyyy-MM-dd"
                      >
                    </el-date-picker>
                  </el-form-item>
                  <!~~ <el-form-item v-if="item.select_type === 'date_range'">
                    <el-date-picker
                      v-model="item.value"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      style="width: 100%;"
                      value-format="yyyy-MM-dd"
                      >
                    </el-date-picker>
                  </el-form-item> ~~>
                  <el-form-item v-if="item.select_type === 'dynamic_filtering'">
                    <el-select v-model="item.value" placeholder="请选择" style="width: 100%;">
                      <el-option
                        v-for="date in date_options"
                        :key="date.value"
                        :label="date.label"
                        :value="date.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </div>
            </el-col>
            <el-col :span="1" style="text-align: right;">
              <el-button type="danger" @click="removeFilterParam(index)">删除</el-button>
              <!~~ <i class="el-icon-remove-outline" @click="removeFilterParam(index)" style="font-size: 1.25rem; color: red;"></i> ~~>
            </el-col>
          </el-row>
        </el-form-item>-->
        <!-- <el-form-item>
          <div style="margin: 10px 5px;">
            <el-button @click="addFilterParam">新增查询条件</el-button>
          </div>
        </el-form-item> -->
        <el-form-item style="text-align: center;">
            <el-button type="primary" @click="handleSave">保存</el-button>
            <el-button @click="handleClose">关闭</el-button>
            <!-- <el-button @click="resetForm">重置</el-button> -->
          </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import $ from 'jquery';
import { VXETable } from 'vxe-table';
import { chartSqlListAPI, saveChartSqlAPI, delChartSqlAPI, duplicateChartSqlAPI } from '@/api/index'

var validateDimension = (rule, value, callback) => {
  if (value.length === 0) {
    callback(new Error('请添加维度'));
  } else {
    callback();
  }
};
var validateMetrics = (rule, value, callback) => {
  if (value.length === 0) {
    callback(new Error('请添加指标'));
  } else {
    callback();
  }
};

export default {
  mixins: [mixin.init],
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      allAlign: 'center',
      drawHeight: 0,
      headerHeight: 120,
      tableHeight: 0,
      tableData: [],
      pager: {
        currentPage: 1,
        pageSize: 20, // 每页20条
        totalResult: 0
      },
      drawer: false,
      direction: 'rtl',
      form: {
        id: '',
        name: '',
        chart_mode: '',
        status: '',
        note: '',
        sql: '',
        dimension_tags: [],
        metrics_tags: [],
        // filter_params: [],
        is_dynamic: '0',
      },
      chart_mode: [
        {
          label: '饼图',
          value: 'pie'
        },
        {
          label: '柱状图',
          value: 'bar'
        },
        {
          label: '折线图',
          value: 'line'
        },
        {
          label: '横-柱状图',
          value: 'bar-y-category'
        },
        {
          label: '面积图',
          value: 'area-stack'
        },
        {
          label: '双轴图',
          value: 'mix-line-bar'
        },
        {
          label: '雷达图',
          value: 'radar'
        },
        {
          label: '漏斗图',
          value: 'funnel'
        },
      ],
      data_status: [{
        label: '在用',
        value: 'enable'
      }, {
        label: '草稿',
        value: 'apply'
      }],
      dynamicTags: ['标签一', '标签二', '标签三'],
      inputVisible: false,
      dimension_input_visible: false,
      metrics_input_visible: false,
      inputValue: '',
      dimension_input_value: '',
      metrics_input_value: '',
      select: '',
      control_chart_type_config: [{
        name: '维度:1,指标:1-N',
        dimension: 1,
        metrics: 'n',
        range: ['bar', 'line', 'bar-y-category', 'area-stack', 'mix-line-bar', 'radar'],
      }, {
        name: '维度:1,指标:1',
        dimension: 1,
        metrics: 1,
        range: ['pie', 'funnel'],
      }],
      rules: {
        name: [
          { required: true, message: '请输入数据源名称', trigger: 'blur' },
        ],
        chart_mode: [
          { required: true, message: '请选择图表类型', trigger: 'change' },
        ],
        sql: [
          { required: true, message: '请输入sql语句', trigger: 'blur' },
        ],
        dimension_tags: [
          { required: true, validator: validateDimension }
        ],
        metrics_tags: [
          { required: true, validator: validateMetrics }
        ],
      },
      date_options: [{
        value: '今天',
        label: '今天'
      }, {
        value: '昨天',
        label: '昨天'
      }, {
        value: '明天',
        label: '明天'
      }],
      temp_select: '',
      formInline: {
        name: '',
        chart_mode: '',
        status: '',
      },
      loading: false,
    }
  },
  computed: {
    // computedHeight() {
    //   return `calc(100vh - ${this.headerHeight-48})`; // 计算高度
    // }
  },
  watch: {
    show (val) {
      if (val) {
        // 获取默认数据源列表
        this.getDataList({});
      }
    },
    'form.chart_mode': { // 根据图表类型，动态显示维度，指标的配置
      handler (chart_mode) {
        if (chart_mode) {
          this.dimension_input_visible = true;
          this.metrics_input_visible = true;
          // 控制显示
          this.control_chart_type_config.forEach(item => {
            if (item.range.includes(chart_mode)) {
              if (item.dimension === this.form.dimension_tags.length) {
                this.dimension_input_visible = false;
              }
              if (typeof item.metrics === 'number' && item.metrics === this.form.metrics_tags.length) {
                this.metrics_input_visible = false;
              }
            }
          });
        } else {
          // console.warn(chart_mode);
        }
      },
      deep: true,
      immediate: true
    },
    'form.dimension_tags' (tags) {
      // 控制显示
      this.control_chart_type_config.forEach(item => {
        if (item.range.includes(this.form.chart_mode)) {
          if (item.dimension === this.form.dimension_tags.length) {
            this.dimension_input_visible = false;
          } else {
            this.dimension_input_visible = true;
          }
        }
      });
    },
    'form.metrics_tags' (tags) {
      // 控制显示
      this.control_chart_type_config.forEach(item => {
        if (item.range.includes(this.form.chart_mode)) {
          if (typeof item.metrics === 'number') { // 自判断数字类型，n为无限。
            if (item.metrics === this.form.metrics_tags.length) {
              this.metrics_input_visible = false;
            } else {
              this.metrics_input_visible = true;
            }
          }
        }
      });
    },
    select_type (val, old) {
      if (val !== old) {

      }
    }
  },
  async mounted () {
    // 表格高度
    this.drawHeight = $('#data-source-drawer').height();
    this.tableHeight = this.drawHeight - this.headerHeight - 50;
    // 判断维度，指标的新增按钮
    // dimension_input_value,metrics_input_visible
    this.control_chart_type_config.forEach(item => {
      this.chart_mode.forEach(mode => {
        if (item.range.includes(mode.value)) {
          mode.note = item.name;
        }
      });
    });
  },
  methods: {
    /**
     * @param {string} name sql数据源名称，模糊查询
     * @param {string} chart_mode 图表类型，json数组，可以查询多个类型
     * @param {string} status 状态，json数组，可以查询多个状态
     * @param {number} row_num 每页行数，默认20
     * @param {number} page 当前页数，默认1，从1开始，1表示第一页，2表示第二页，依次类推;
     * @returns {Promise<void>}
     * @description 获取数据列表
     */
    async getDataList ({ name = '', chart_mode = '', status = '', row_num = this.pager.pageSize, page = this.pager.currentPage }) {
      this.loading = true;
      const { code, data, total } = await chartSqlListAPI({ name, chart_mode, status, row_num, page });
      if (code) {
        this.tableData = data;
        this.pager.totalResult = total;
        this.loading = false;
      } else {
        this.loading = false;
      }
    },
    pageChange ({ type, currentPage, pageSize, $event }) {
      let params = {
        name: this.formInline.name,
        chart_mode: this.formInline.chart_mode.length ? JSON.stringify(this.formInline.chart_mode) : '',
        status: this.formInline.status.length ? JSON.stringify(this.formInline.status) : '',
        page: currentPage,
        row_num: pageSize,
      };
      this.getDataList(params);
    },
    closeDrawer () {
      this.$emit('close', false);
    },
    addDataSource () { // 添加数据源
      this.drawer = true;
      this.form = {
        id: '',
        name: '',
        chart_mode: '',
        status: '',
        note: '',
        sql: '',
        dimension_tags: [],
        metrics_tags: [],
        // filter_params: [],
        is_dynamic: '0',
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleDimensionClose(tag) {
      this.form.dimension_tags.splice(this.form.dimension_tags.indexOf(tag), 1);
    },
    handleMetricsClose(tag) {
      this.form.metrics_tags.splice(this.form.metrics_tags.indexOf(tag), 1);
    },
    addDimension() {
      if (this.form.dimension_tags.includes(this.dimension_input_value)) {
        this.$message.error('重复添加同一个维度');
        return;
      }
      if (this.dimension_input_value) {
        this.form.dimension_tags.push(this.dimension_input_value);
        this.dimension_input_value = '';
        this.$nextTick(_ => {
          this.$refs.dimensionSaveTagInput?.$refs.input.focus();
        });
        this.$refs.form.validate((valid) => {
        });
      } else {
        this.$message.error('维度不能为空');
      }
    },
    addMetrics() {
      if (this.form.metrics_tags.includes(this.metrics_input_value)) {
        this.$message.error('重复添加同一个指标');
        return;
      }
      if (this.metrics_input_value) {
        this.form.metrics_tags.push(this.metrics_input_value);
        this.metrics_input_value = '';
        this.$nextTick(_ => {
          this.$refs.metricsSaveTagInput?.$refs.input.focus();
        });
        this.$refs.form.validate((valid) => {
        });
      } else {
        this.$message.error('指标不能为空');
      }
    },
    // addFilterParam () {
    //   this.form.filter_params.push({
    //     name: '',
    //     value: '',
    //     type: '',
    //     select_type: '',
    //   });
    // },
    // removeFilterParam (index) {
    //   this.form.filter_params.splice(index, 1);
    // },
    handleSave () {
      // 检查过滤条件输入是否为空
      // let flag = this.form.filter_params.filter(item => {
      //   if (item.name === '' || item.value === '' || item.type === '') {
      //     return true;
      //   }
      //   return false;
      // });
      let flag = false;

      this.$refs.form.validate((valid) => {
        if (valid) {
          if (flag.length) {
            this.$message.error('过滤条件不能为空');
          } else {
            let dimension_tags = this.form.dimension_tags.map(item => { return { name: item, type: '维度' }});
            let metrics_tags = this.form.metrics_tags.map(item => { return { name: item, type: '指标' }});
            // let filter_params = this.form.filter_params.map(item => { return { name: item.name, type: item.type, value: item.value, select_type: item.select_type }});
            let params = {
              id: this.form.id,
              name: this.form.name,
              chart_mode: this.form.chart_mode,
              sql_stat: this.form.sql,
              sql_col: JSON.stringify([...dimension_tags, ...metrics_tags]),
              // sql_parm: JSON.stringify(filter_params),
              status: this.form.status,
              note: this.form.note,
              is_dynamic: this.form.is_dynamic,
            };
            // 保存数据
            this.saveSql(params);
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async saveSql ({ id = '', name = '', chart_mode = '', sql_stat = '', sql_col = '', sql_parm = '', status = '', note = '', is_dynamic = '0' }) { // 保存数据源
      const { code, data } = await saveChartSqlAPI({ id, name, chart_mode, sql_stat, sql_col, sql_parm, status, note, is_dynamic });
      if (code) {
        this.drawer = false;
        this.onSearchSubmit();
        VXETable.modal.message({
          message: '保存成功',
          status: 'success'
        });
      } else {
        return false;
      }
    },
    handleClose () {
      this.drawer = false;
      this.resetForm();
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    editDataItem (item) { // 打开编辑框
      this.drawer = true;
      this.form = {
        id: item.id,
        name: item.name,
        chart_mode: item.chart_mode,
        status: item.status,
        note: item.note,
        sql: item.sql_stat,
        dimension_tags: (item.sql_col.filter(item => item.type === '维度')).map(item => { return item.name }),
        metrics_tags: (item.sql_col.filter(item => item.type === '指标')).map(item => { return item.name }),
        // filter_params: item.sql_parm.map(item => {
        //   return {
        //     name: item.name,
        //     value: item.value,
        //     type: item.type,
        //     select_type: item.select_type,
        //   }
        // }),
        is_dynamic: item.is_dynamic,
      }
    },
    async copyDataItem (item) { // 复制行数据
      const { code, data } = await duplicateChartSqlAPI({ sql_id: item.id });
      if (code) {
        this.onSearchSubmit();
        VXETable.modal.message({
          message: '复制成功',
          status: 'success'
        });
      }
    },
    async deleteDataItem (item) {
      const type = await VXETable.modal.confirm('您确定要删除吗？');
      if (type === 'confirm') {
        const { code, data } = await delChartSqlAPI({ id: item.id });
        if (code) {
          VXETable.modal.message({
            message: '删除成功',
            status: 'success'
          });
          this.onSearchSubmit();
        }
      } else {
        VXETable.modal.message({
          message: '已取消删除',
          status: 'info'
        })
      }
    },
    changeDateType (item) {
      // TAG: 日期组件有定位bug，直接切换两个日期组件计算位置错位，适配做的fix 无意义。
      this.temp_select = item.select_type;
      item.select_type = 'dynamic_filtering';
      setTimeout(() => {
        item.select_type = this.temp_select;
      }, 100);
    },
    onSearchSubmit() { // 数据源列表搜索条件查
      let params = {
        name: this.formInline.name,
        chart_mode: this.formInline.chart_mode.length ? JSON.stringify(this.formInline.chart_mode) : '',
        status: this.formInline.status.length ? JSON.stringify(this.formInline.status) : '',
      };
      this.getDataList(params);
    },
    formatterMode ({ cellValue }) {
      let item = this.chart_mode.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    formatterStatus ({ cellValue }) {
      let item = this.data_status.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
  },
  onUnmounted () {
    console.warn('onUnmounted');
  },
}
</script>

<style lang="less" scoped>
.list-header {
  position: fixed;
  z-index: 1000;
  background: #FFF;
  width: 100%;
  border-bottom: 1px solid #eee;
  padding: 0 1rem;
}

.el-tag {
  margin-top: 10px;
  margin-bottom: 0;
}

.el-tag + .el-tag {
  // margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

</style>