
/*定制工作台*/
<template>
  <div class="customize">
    <div class="title">
      <h3>定制工作台</h3>
      <div class="change" @click="Change">
        <img src="../../../assets/img/change.png" />更换背景
      </div>
    </div>

    <el-form
      ref="customizeForm"
      class="customize-form"
      :model="customizeForm"
      :rules="customizeRules"
      label-position="left"
    >
      <el-transfer
        v-model="selectList"
        :data="workBenchList"
        :titles="['可定制求解器', '已定制求解器']"
      >
        <span slot-scope="{ option }">
          <el-tooltip placement="top">
            <div slot="content">
              <p>
                工作台：<span>{{ option.label.split(',')[0] }}</span>
              </p>
              <p>
                类&nbsp;&nbsp;&nbsp;型：<span>{{
                  option.label.split(',')[1]
                }}</span>
              </p>
              <p>
                类&nbsp;&nbsp;&nbsp;别：<span>{{
                  option.label.split(',')[2]
                }}</span>
              </p>
              <p>
                描&nbsp;&nbsp;&nbsp;述：<span>{{
                  option.label.split(',')[3]
                }}</span>
              </p>
            </div>
            <div class="list">
              <span class="company">{{ `${option.label.split(',')[0]}` }}</span>
              -
              <span class="type">{{ `${option.label.split(',')[1]}` }}</span>
              -
              <span class="size">{{ `${option.label.split(',')[2]}` }}</span>
            </div>
            <!-- <span>{{
              `${option.label.split(',')[0]} - ${option.label.split(',')[1]} -
              ${option.label.split(',')[2]}`
            }}</span> -->
          </el-tooltip>
        </span>
      </el-transfer>
      <div class="next-btn">
        <el-button
          type="danger"
          size="small"
          class="next-btn"
          @click.native.prevent="Next"
          >保存</el-button
        >
      </div>
    </el-form>

    <Change :change-config="changeConfig" @putChange="getChange" />
  </div>
</template>

<script>
import Change from './components/Change'
import { request, getImage } from '@/utils/request'
export default {
  name: 'Customize',
  components: { Change },
  data() {
    return {
      company: '',
      customizeForm: {},
      customizeRules: {},
      workBenchList: [],
      selectList: [],
      changeConfig: {
        isShow: false,
        backgroundFileid: getImage(this.$store.getters.backgroundFileid),
      },
    }
  },
  computed: {},
  created() {
    this.getCustomize('0')
  },
  methods: {
    getCustomize(type) {
      const params = {
        transCode: 'C00036',
        type,
      }
      request(params)
        .then((res) => {
          if (type == '0') {
            let workBenchList = []
            res.rows.map((item, index) => {
              workBenchList.push({
                key: item.cfdId,
                label: `${item.platformName},${item.kindName},${item.name},${item.remark}`,
              })
            })
            this.workBenchList = workBenchList
            this.getCustomize('1')
          } else if (type == '1') {
            let workBenchList = []
            let selectList = []
            res.rows.map((item, index) => {
              workBenchList.push({
                key: item.cfdId,
                label: `${item.platformName},${item.kindName},${item.name},${item.remark}`,
              })
              selectList.push(item.cfdId)
            })
            this.workBenchList = this.workBenchList.concat(workBenchList)
            this.selectList = selectList
          }
        })
        .catch((err) => {})
    },
    // 确定
    Next() {
      this.$refs.customizeForm.validate((valid) => {
        if (valid) {
          const params = {
            transCode: 'C00037',
            cfd: this.selectList.toString(),
          }
          request(params)
            .then((res) => {
              this.$message.success('保存成功!')
            })
            .catch((err) => {})
        } else {
          return false
        }
      })
    },
    Change() {
      const params = {
        transCode: 'B00001',
      }
      request(params)
        .then((res) => {
          this.$store.dispatch('user/changeState', {
            key: 'backgroundFileid',
            value: res.backgroundFileid,
          })
          this.changeConfig = {
            isShow: true,
            backgroundFileid: getImage(res.backgroundFileid),
          }
        })
        .catch((err) => {})
    },
    getChange(data) {
      this.changeConfig.isShow = false
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.customize {
  @include w_h(100%, 100%);
  padding: 1px 30px;
  font-size: 12px;
  background: $color_f;
  .title {
    @include flex();
    padding: 30px 0;
    font-size: 20px;
    color: $color_3;
    .change {
      font-size: 14px;
      @include flex();
      transition: all 0.3s;
      &:hover {
        cursor: pointer;
        color: $color_on;
      }
      img {
        margin: 5px;
        width: 16px;
      }
    }
  }
  .customize-form {
    @include w_h(100%);
    background: $color_f;
    .solt {
      padding: 0 6px;
      font-size: 12px;
      color: $color_6;
    }
    .list {
      display: inline-block;
      .company {
        color: #2aad08;
      }
      .type {
        color: #0a83f4;
      }
      .size {
        color: $color_on;
      }
    }
    .next-btn {
      margin: 30px auto;
      @include w_h(200px);
    }
  }
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
@supports (-webkit-mask: none) and (not (cater-color: $color_9)) {
  .customize-form .el-input input {
    font-size: 12px;
    color: $color_9;
  }
}
.customize-form {
  .el-input {
    &__inner:focus {
      border-color: $color_9;
    }
    &--prefix .el-input__inner {
      color: $color_6;
      padding-left: 65px;
    }
  }
  .el-transfer {
    @include flex();
    font-size: 12px;
    &-panel {
      border: 1px solid $color_d;
      @include w_h(48%, 500px);
      min-width: 340px;
      overflow: auto;

      .el-checkbox__label {
        font-size: 12px;
        overflow: unset;
      }
      .el-transfer-panel__header {
        .el-checkbox {
          &__label {
            font-size: 14px;
            color: #303133;
            font-weight: 400;
          }
        }
      }
      .el-transfer-panel__body {
        height: calc(100% - 40px);
      }
      .el-transfer-panel__list {
        height: 100%;
      }
    }
    &__buttons {
      padding: 0 8px;
    }
    .el-button {
      margin: 5px auto;
      display: block;
      padding: 10px 5px;
    }
  }
}
</style>>

