<template>
  <!--附加要求-->
  <div class="additional">
    <div class="ctr-tec-top">
      <div class="ytg-return-div" @click="handleBack">
        <span class="el-icon-arrow-left el-return-IconStyle" ></span>
        <span @click="visible = 1" class="returnText">返回</span>
      </div>

      <span>最终用户：</span><el-input v-model="headRow.customer_name" disabled style="width: 300px;margin-right: 10px;" size="small"></el-input>
      <div v-show="visibleFlag" style="display: inline">
        <el-button :loading="saveLoading" size="small" @click="handleSave">保存</el-button>
        <el-button :loading="UnuseLoading" size="small" @click="handleUnuse">停用</el-button>
        <el-button :loading="chooseLoading" type="primary" size="small" @click="handleChoose">选择</el-button>
      </div>

    </div>

    <el-row style="height: 94%;">
      <el-col class="col-l" :span="6">
        <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #ccc;padding-left: 20px">附加要求</div>
        <div class="add-l">
          <ul>
            <!--<div :id="'item' + index" v-for="(item, index) in leftList" :key="index" class="add-list-row">-->
            <template v-for="(item, index) in leftList" >
              <el-tooltip placement="right" effect="light" :key="item.add_ask_no">
                <div slot="content">{{item.add_ask_no}}{{index === 0 ? '' : '+'}}{{index === 0 ? '' : headRow.customer_name}}</div>
                <li  @click="findRightTb(item, index)" class="add-list-row" :id="'item' + index"><span class="ytg-icons ytg-additional-liBtn ytg-additional-icon"></span>
                  {{item.add_ask_no}}{{index === 0 ? '' : '+'}}{{index === 0 ? '' : headRow.customer_name}}</li>
              </el-tooltip>
              <!--<span class="ytg-icons ytg-additional-liBtn"></span>-->
              <!--<li v-if="index===0" style="display: inline-block" @click="findRightTb(item, index)">{{item.add_ask_no}}</li>-->
              <!--<li v-else style="display: inline-block" @click="findRightTb(item, index)">{{item.add_ask_no}} + {{headRow.customer_name}}</li>-->
            <!--</div>-->
            </template>
          </ul>
        </div>
      </el-col>
      <el-col class="col-r" :span="18">
        <div class="add-r ctr-tec-table">
          <el-table :data="data1" @select="handleSelect" @select-all="handleSelectAll">
            <el-table-column fixed="left" type="selection" align="center"></el-table-column>
            <el-table-column prop="add_ask_type" label="要求类型" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.add_ask_type==='0'">标准项</span>
                <span v-else-if="scope.row.add_ask_type==='1'">修改项</span>
                <span v-else-if="scope.row.add_ask_type==='2'">新增项</span>
                <span v-else></span>
              </template>
            </el-table-column>
            <el-table-column label="要求项" min-width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.ask_itme_desc" placeholder="" size="small" @change="handleAskItme" @focus="askItmeFocus(scope.$index)">
                  <el-option v-for="item in askItemList" :key="item.id" :label="item.text" :value="item.text">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="要求分项" min-width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.ask_sub_itme_desc" placeholder="" size="small" @change="handleAskSubItme" @focus="askSubItmeFocus(scope.$index)">
                  <el-option v-for="item in askSubItemList" :key="item.id" :label="item.text" :value="item.text">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="标准说明" align="center">
              <el-table-column :show-overflow-tooltip="true" prop="ask_sub_itme_val_desc" label="交付标准要求标准说明" min-width="350"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="客户要求标准说明" min-width="350">
                <template slot-scope="scope">
                  <el-select style="width: 100%;" clearable allow-create filterable :filter-method="handleFilterMethod" v-model="scope.row.customer_val_desc"
                             placeholder="" size="small" @change="handleCustomerVal" @focus="customerValFocus(scope.$index)">
                    <el-option v-for="item in customerValList" :key="item.id" :label="item.text" :value="item.text">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="add_ask_status" label="评审状态" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.add_ask_status==='1'">待评审</span>
                <span v-else-if="scope.row.add_ask_status==='2'">评审通过</span>
                <span v-else-if="scope.row.add_ask_status==='3'">评审不通过</span>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="review_desc" label="评审说明" min-width="200"></el-table-column>
            <el-table-column prop="valid_flag" label="有效标志" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.valid_flag==='1'">有效</span>
                <span v-else>无效</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="140">
              <template slot-scope="scope">
                <el-button type="text" @click="showDetail(scope.row)">查看</el-button>
                <el-button v-if="scope.$index === data1.length - 1" type="text" @click="addRow">添加空白行</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <div is="additionalDetail" :row="DetailRow"></div>
  </div>
</template>
<script>
// import additionalDetail from '@/views/slaes/components/contract/additionalDetail.vue';
import additionalDetail from '@/views/sales/components/contract/additionalDetail.vue'
export default {
  components: { additionalDetail },
  data () {
    return {
      paramObj: {
        contract_pk: '',
        contract_line_no: '',
        page_type: '',
        order_flag_no: ''
      }, // 路由参数
      chooseLoading: false,
      UnuseLoading: false,
      saveLoading: false,
      param: [],
      headRow: {},
      lineRow: {},
      leftData: {}, // 当前所点击的左边列表的数据
      leftIndex: 0,
      isLong: false, // 客户要求超过4000字则为true
      selection: [],
      // 当前操作的表格行的index
      scopeIndex: '',
      askItemList: [],
      askSubItemList: [],
      customerValList: [],
      DetailRow: {},
      leftList: [],
      data1: [],
      data1ToCompare: [] // 用于和data1比较的副本，判断是否为修改项
    }
  },
  mounted () {
    let _this = this;
    let val = decodeURI(this.$route.params.lineData);
    this.param = val.split('_');
    this.paramObj.contract_pk = this.param[0];
    this.paramObj.contract_line_no = this.param[1];
    this.paramObj.page_type = this.param[2]; // 合同：contract- '0' 合同维护 1' 合同生效 ‘2’ 合同结案 '3' 合同跟踪   order- '0' 订单信息 ' '1' 订单下发  '2' 订单跟踪  '3' 订单

    // 合同
    if (this.paramObj.page_type.indexOf('contract') >= 0) {
      this.paramObj.addSelectedIndex = this.param[3]; //  被选中的附加要求
    } else {
      this.paramObj.order_no = this.param[3];
      this.paramObj.order_flag_no = this.param[4]; // 订单状态
    }

    // 查询合同头详情
    this.axios.post('/SlmContractHeatInfoService/doQueryDetailWeb', [
      {object: { contract_pk: this.paramObj.contract_pk }}
    ]).then(function (response) {
      if (response) {
        _this.headRow = response.data.data;
        _this.findLeftList(_this.headRow.customer_no);
      }
    });
    // 查询合同行详情
    this.axios.post('/SlmContractLineInfoService/doQueryDetailWeb', [
      {object: {contract_line_no: this.paramObj.contract_line_no}}
    ]).then(function (response) {
      if (response) {
        _this.lineRow = response.data.data;
      }
    });

    // 面包屑设置
    this.setBreadCrumb()
  },
  computed: {
    visibleFlag () {
      if (this.paramObj.page_type.indexOf('contract') >= 0) {
        if (this.lineRow.line_flag_no === '102601') {
          return true;
        } else {
          return false;
        }
      } else {
        if (this.paramObj.order_flag_no === '103401') {
          return true;
        } else {
          return false;
        }
      }
    }
  },
  methods: {
    setBreadCrumb () {
      if (this.paramObj.page_type === 'contract-0') {
        this.$store.commit('setBreadcrumb', {
          breadcrumb: ['xsgl', 'xsgl-04', 'xsgl-04-01']
        });
      } else if (this.paramObj.page_type === 'contract-1') {
        this.$store.commit('setBreadcrumb', {
          breadcrumb: ['xsgl', 'xsgl-04', 'xsgl-04-04']
        });
      } else if (this.paramObj.page_type === 'contract-2') {
        this.$store.commit('setBreadcrumb', {
          breadcrumb: ['xsgl', 'xsgl-04', 'xsgl-04-08']
        });
      } else if (this.paramObj.page_type === 'contract-3') {
        this.$store.commit('setBreadcrumb', {
          breadcrumb: ['xsgl', 'xsgl-04', 'xsgl-04-09']
        });
      } else if (this.paramObj.page_type === 'order-0') {
        this.$store.commit('setBreadcrumb', {
          breadcrumb: ['xsgl', 'xsgl-05', 'xsgl-05-01']
        });
      } else if (this.paramObj.page_type === 'order-1') {
        this.$store.commit('setBreadcrumb', {
          breadcrumb: ['xsgl', 'xsgl-05', 'xsgl-05-02']
        });
      } else if (this.paramObj.page_type === 'order-2') {
        this.$store.commit('setBreadcrumb', {
          breadcrumb: ['xsgl', 'xsgl-05', 'xsgl-05-03']
        });
      } else if (this.paramObj.page_type === 'order-3') {
        this.$store.commit('setBreadcrumb', {
          breadcrumb: ['xsgl', 'xsgl-05', 'xsgl-05-04']
        });
      }
    },

    // 查询要求项
    findAskItmeList () {
      let _this = this;
      // memo1: this.leftList[0].add_ask_no
      this.axios.post('/PbModelDbService/findAskItemCmdDb', [{}]).then(function (response) {
        if (response) {
          _this.askItemList = response.data.data;
        }
      });
    },
    // 查询要求分项
    findAskSubItmeList () {
      let _this = this;
      this.axios.post('/PbModelDbService/findAskItemCmdDb', [{memo1: this.data1[this.scopeIndex].ask_itme}]).then(function (response) {
        if (response) {
          _this.askSubItemList = response.data.data;
        }
      });
    },
    // 查询标准要求说明
    findCustomerValList () {
      let _this = this;
      this.axios.post('/PbModelDbService/findAskItemCmdDb', [{memo1: this.data1[this.scopeIndex].ask_sub_itme}]).then(function (response) {
        if (response) {
          _this.customerValList = response.data.data;
        }
      });
    },
    // 要求项获得焦点
    askItmeFocus (index) {
      this.scopeIndex = index;
      this.findAskItmeList();
    },
    // 要求分项获得焦点
    askSubItmeFocus (index) {
      this.scopeIndex = index;
      this.findAskSubItmeList();
    },
    // 客户标准说明获得焦点
    customerValFocus (index) {
      this.scopeIndex = index;
      this.findCustomerValList();
    },
    handleFilterMethod () {
    },
    handleChoose () {
      let _this = this;
      if (this.leftIndex === 0) {
        _this.$message.warning('该选项为标准项，不能被选择')
        return;
      }
      if (this.leftData.add_ask_no) {
        this.chooseLoading = true;
        console.log('order_no', this.paramObj.order_no);
        this.axios.post('/SlmCustomerAddAskService/doSelectWeb', [{
          object: {
            add_ask_no: this.leftData.add_ask_no
          },
          memo1: this.paramObj.page_type.split('-')[0] === 'order' ? this.paramObj.order_no : this.paramObj.contract_line_no,
          memo2: this.paramObj.page_type.split('-')[0] === 'order' ? '1' : '0' //  0合同行 1订单
        }]).then(function (response) {
          if (response) {
            if (response.data.state === '200') {
              _this.$message.success('操作成功！');
            } else {
              _this.$message.error(response.data.msgInfo);
            }
          }
          _this.chooseLoading = false;
        }).catch(function () {
          _this.chooseLoading = false;
        });
      }
    },
    handleUnuse () {
      let _this = this;
      if (this.leftData.add_ask_no) {
        this.UnuseLoading = true;
        this.axios.post('/SlmCustomerAddAskService/doDisableWeb', [{object: {add_ask_no: this.leftData.add_ask_no}}]).then(function (response) {
          if (response) {
            if (response.data.state === '200') {
              _this.$message.success('操作成功');
              _this.data1 = [];
              _this.findLeftList(_this.headRow.customer_no);
              // 去掉标红
              $('.add-list-row').removeClass('add-list-row-check');
            } else {
              _this.$message.error(response.data.msgInfo);
            }
          }
          _this.UnuseLoading = false;
        }).catch(function () {
          _this.UnuseLoading = false
        });
      }
    },
    handleSelectAll (selection) {
      this.selection = selection;
    },
    handleSelect (selection) {
      this.selection = selection;
    },
    handleSave () {
      // 校验：选择了不止1行数据，且这些数据的 ‘用户标准说明’ 不能超过4000字
      if (this.selection.length > 0) {
        // 判断数据中是否有空行，字数是否超长
        for (let i in this.selection) {
          if (this.selection[i].ask_itme_desc) {
            if (this.selection[i].ask_sub_itme_desc) {
              if (this.selection[i].customer_val_desc || this.selection[i].ask_sub_itme_val_desc) {
                //
              } else {
                this.$message.error('您的客户要求标准说明未填写');
                return;
              }
            } else {
              this.$message.error('请选择要求分项');
              return;
            }
          } else {
            this.$message.error('请选择要求项');
            return;
          }
          if (this.selection[i].customer_val_desc.length > 4000) {
            this.$message.error('勾选的第' + (parseInt(i) + 1) + '条数据标准说明超长');
            return;
          }
        }
      } else {
        this.$message.error('必须勾选一行');
        return;
      }
      let _this = this;
      let param = JSON.parse(JSON.stringify(this.selection));
      for (let item of param) {
        if (item.add_ask_type !== '0') {
          item.ask_sub_itme_val = item.customer_val;
          item.ask_sub_itme_val_desc = item.customer_val_desc;
        }
      }
      this.saveLoading = true;
      this.axios.post('/SlmCustomerAddAskService/doAddWeb',
        [
          {
            object: {
              customer_no: this.headRow.customer_no,
              customer_nm: this.headRow.customer_name,
              list: param
            }
          }
        ]
      ).then(function (response) {
        if (response) {
          if (response.data.state === '200') {
            _this.$message.success('保存成功');
            _this.data1 = [];
            _this.data1ToCompare = [];
            _this.findLeftList(_this.headRow.customer_no);
          } else {
            _this.$message.error(response.data.msgInfo);
          }
        }
        _this.saveLoading = false;
      }).catch(function () {
        _this.saveLoading = false;
      });
    },
    addRow () {
      let obj = this.data1[this.data1.length - 1];
      if (obj.ask_itme && obj.ask_sub_itme && obj.customer_val_desc) {
        this.data1.push({
          ask_itme: '',
          ask_itme_desc: '',
          ask_sub_itme: '',
          ask_sub_itme_desc: '',
          ask_sub_itme_val: '',
          ask_sub_itme_val_desc: '',
          customer_no: this.headRow.customer_no,
          customer_nm: this.headRow.customer_name,
          add_ask_type: '2',
          add_ask_status: '',
          review_desc: '',
          valid_flag: '',
          customer_val: '',
          customer_val_desc: ''
        });
      } else {
        this.$message.info('请填写新增项');
      }
    },
    handleAskItme (param) {
      let obj = this.askItemList.find((value, index, arr) => {
        return value.text === param;
      });
      this.data1[this.scopeIndex].ask_itme = obj.id;
      if (this.scopeIndex <= this.data1ToCompare.length - 1) {
        /**
         * 获得焦点的行<=查询出来的表格数据的长度，则判断是否做出了修改为修改项
         * 如果是修改项，类型就改为修改项，反之改为原来的类型
         * 如果大于，那么一定是新增项
         * */
        let obj2 = this.data1ToCompare[this.scopeIndex];
        if (obj2.ask_itme === this.data1[this.scopeIndex].ask_itme &&
          obj2.ask_sub_itme === this.data1[this.scopeIndex].ask_sub_itme &&
          obj2.customer_val_desc === this.data1[this.scopeIndex].customer_val_desc
        ) {
          this.data1[this.scopeIndex].add_ask_type = this.data1ToCompare[this.scopeIndex].add_ask_type;
        } else {
          this.data1[this.scopeIndex].add_ask_type = '1';
        }
      }
    },
    handleAskSubItme (param) {
      let obj = this.askSubItemList.find((value, index, arr) => {
        return value.text === param;
      });
      this.data1[this.scopeIndex].ask_sub_itme = obj.id;
      if (this.scopeIndex <= this.data1ToCompare.length - 1) {
        /**
         * 获得焦点的行<=查询出来的表格数据的长度，则判断是否做出了修改为修改项
         * 如果是修改项，类型就改为修改项，反之改为原来的类型
         * 如果大于，那么一定是新增项
         * */
        let obj2 = this.data1ToCompare[this.scopeIndex];
        if (obj2.ask_itme === this.data1[this.scopeIndex].ask_itme &&
          obj2.ask_sub_itme === this.data1[this.scopeIndex].ask_sub_itme &&
          obj2.customer_val_desc === this.data1[this.scopeIndex].customer_val_desc
        ) {
          this.data1[this.scopeIndex].add_ask_type = this.data1ToCompare[this.scopeIndex].add_ask_type;
        } else {
          this.data1[this.scopeIndex].add_ask_type = '1';
        }
      }
    },
    handleCustomerVal (param) {
      let len = _charLength(param)
      if (len > 4000) {
        this.$message.error('字数不能超过4000字，当前已输入' + len + '字');
        this.isLong = true;
      } else {
        this.isLong = false;
      }
      if (param) {
        let obj = this.customerValList.find((value, index, arr) => {
          return value.text === param;
        });
        if (obj) {
          this.data1[this.scopeIndex].customer_val = obj.id;
        } else {
          // 下拉选择找不到obj说明是手动输入的文字，列表当中没有
          this.data1[this.scopeIndex].customer_val_desc = param;
        }
      } else {
        // 清空了下拉选择所以进入else
        this.data1[this.scopeIndex].customer_val_desc = '';
      }
      if (this.scopeIndex <= this.data1ToCompare.length - 1) {
        /**
         * 获得焦点的行<=查询出来的表格数据的长度，则判断是否做出了修改为修改项
         * 如果是修改项，类型就改为修改项，反之改为原来的类型
         * 如果大于，那么一定是新增项
         * */
        let obj2 = this.data1ToCompare[this.scopeIndex];
        if (obj2.ask_itme === this.data1[this.scopeIndex].ask_itme &&
          obj2.ask_sub_itme === this.data1[this.scopeIndex].ask_sub_itme &&
          obj2.customer_val_desc === this.data1[this.scopeIndex].customer_val_desc
        ) {
          this.data1[this.scopeIndex].add_ask_type = this.data1ToCompare[this.scopeIndex].add_ask_type;
        } else {
          this.data1[this.scopeIndex].add_ask_type = '1';
        }
      }
    },
    showDetail (row) {
      this.DetailRow = row;
      $('#additionalDetailSlider').slider('show');
    },
    findRightTb (item, index) {
      this.leftData = item;
      this.leftIndex = index;
      $('.add-list-row').removeClass('add-list-row-check');
      $('#item' + index).addClass('add-list-row-check');
      this.doAxios();
    },
    doAxios () {
      let _this = this;
      let memo1 = '';
      let addAskNo = '';
      if (this.leftIndex === 0) {
        memo1 = this.leftData.add_ask_no;
      } else {
        addAskNo = this.leftData.add_ask_no;
      }
      this.axios.post('/SlmCustomerAddAskService/doQueryListWeb', [{object: {add_ask_no: addAskNo}, memo1: memo1}]).then(function (response) {
        if (response) {
          for (let item of response.data.data) {
            if (_this.leftIndex === 0) {
              item.add_ask_type = '0';
            }
            if (item.add_ask_type === '0') {
              // 标准项，内容展示在标准说明一列
              item.customer_val = '';
              item.customer_val_desc = '';
            } else {
              // 非标准项，内容展示在客户要求说明一列
              item.customer_val = item.ask_sub_itme_val;
              item.customer_val_desc = item.ask_sub_itme_val_desc;
              item.ask_sub_itme_val = '';
              item.ask_sub_itme_val_desc = '';
            }
          }
          _this.data1 = response.data.data;
          _this.data1ToCompare = JSON.parse(JSON.stringify(response.data.data));
          _this.data1.push({
            ask_itme: '',
            ask_itme_desc: '',
            ask_sub_itme: '',
            ask_sub_itme_desc: '',
            ask_sub_itme_val: '',
            ask_sub_itme_val_desc: '',
            customer_no: _this.headRow.customer_no,
            customer_nm: _this.headRow.customer_name,
            add_ask_type: '2',
            add_ask_status: '',
            review_desc: '',
            valid_flag: '',
            customer_val: '',
            customer_val_desc: ''
          });
        }
      });
    },
    findLeftList (customerNo) {
      let _this = this;
      this.axios.post('/SlmCustomerAddAskService/doQueryWeb', [{object: {customer_no: customerNo}, memo1: this.param[1]}]).then(function (response) {
        if (response) {
          _this.leftList = response.data.data;
          // 左边列表查询完毕之后去查询要求项，避免要求项里面拿不到标准项的主键
          if (_this.paramObj.addSelectedIndex !== '') {
            for (let index in _this.leftList) {
              if (_this.leftList[index].add_ask_no === _this.paramObj.addSelectedIndex) {
                setTimeout(function () {
                  _this.findRightTb(_this.leftList[index], index);
                }, 300)
              }
            }
          }
          _this.findAskItmeList();
        }
      });
    },

    // 返回操作
    handleBack () {
      if (this.paramObj.page_type === 'contract-0') {
        this.$router.push({name: 'contractMaintain'});
      } else if (this.paramObj.page_type === 'contract-1') {
        this.$router.push({name: 'effective'});
      } else if (this.paramObj.page_type === 'contract-2') {
        this.$router.push({name: 'close-case'});
      } else if (this.paramObj.page_type === 'contract-3') {
        this.$router.push({name: 'contract-tracing'});
      } else if (this.paramObj.page_type === 'order-0') {
        this.$router.push({name: 'order-info'});
      } else if (this.paramObj.page_type === 'order-1') {
        this.$router.push({name: 'order-issued'});
      } else if (this.paramObj.page_type === 'order-2') {
        this.$router.push({name: 'order-tracing'});
      } else if (this.paramObj.page_type === 'order-3') {
        this.$router.push({name: 'order-close'});
      }
    }
  }
}
function _charLength (str, chineseLen) {
  if (!str || str.length <= 0) { return 0; };
  // str = mytrim(str);
  let chineseLength = 3; // utf-8编码，中文长度
  if (chineseLen && chineseLen > 0) {
    chineseLength = chineseLen
  }
  let objValue = str;
  let objLength = 0;
  let compareChar = '';
  let regExp = new RegExp("^[A-Za-z0-9 -_`~!@#$%^&*()-+=|,<.>/?;:'\\\"]$");
  for (let count = 0; count < objValue.length; count++) {
    compareChar = objValue.substring(count, count + 1);
    if (regExp.test(compareChar)) {
      objLength += 1;
    } else if (compareChar === '\\') {
      objLength += 1;
    } else {
      objLength += chineseLength;
    }
  }
  return objLength;
}
</script>
<style scoped>
  .ytg-return-div {
    width: 100px;
    padding-left: 15px;
    position: relative;
    top: 10px;
    display: inline-block;
    cursor: pointer;
  }
  .additional {
    height: 100%;
    position: relative;
    border-top: 1px solid #ccc;
  }
  .ytg-return-div {
    display: inline;
    position: relative;
    top: 8px;
    left: 0px;
    float: left;
    text-align: left;
    padding-left: 0;
    cursor: pointer;
  }

  .ctr-tec-top {
    height: 5%;
    display: inline-block;
    width: 100%;
    padding: 5px 20px;
    text-align: right;
    border-bottom: 1px solid #cccccc;
  }

  .add-l ul {
    padding: 0 20px;
  }
  .add-l li {
    border-bottom: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
    margin-left: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
  }
  .ytg-additional-icon {
    vertical-align: middle;
    margin-right: 3px;
  }
  .add-r {
    padding: 20px;
  }
  .addHead {
    height: 40px;
    line-height: 40px;
    padding-right: 20px;
    text-align: right;
    border-bottom: 1px solid #ccc;
  }
  .col-l {
    height: 100%;
    border-right: 1px solid #ccc;
    overflow: auto;
  }
  .col-r {
    height: 100%;
    border-left: 1px solid #ccc;
    transform: translateX(-1px);
    overflow: auto;
  }
  .add-list-row { cursor: pointer; }
  .add-list-row span { vertical-align: middle; }
  .add-list-row-check { color: #FF474E; }
</style>
