// 布局的位置相对于左上角的百分比
function getPer(numerator, denominator) {
  return `${parseFloat((100.0 * numerator) / denominator, 10).toFixed(0)}%`
}
const elWidth = 972 // 宽度
const elHeight = 615 // 高度
const imgw1 = 203 // 正面像
const imgw2 = 264 // 全景或X片宽度
const imgh1 = 244 // 正面像的高度
const imgh2 = 163 // 上颌和下颌高度，咬合高度
const imgh3 = 309 // 全景高度
const imgh4 = 194 // X片高度
const marginx = 30 // 右边的间距
const marginy = 20 // 顶部的间距
const w1 = getPer(imgw1, elWidth)
const w2 = getPer(imgw2, elWidth)
const hBody = getPer(imgh1, elHeight)
const hTeeth = getPer(imgh2, elHeight)
const hPanoramic = getPer(imgh3, elHeight)
const hSideX = getPer(imgh4, elHeight)
const topy0 = getPer(0, elWidth) // 第一列第一个点
const leftx1 = getPer(imgw1 + marginx, elWidth) // 第二列第一个
const leftx2 = getPer((imgw1 + marginx) * 2, elWidth) // 第三列第一个
const leftx3 = getPer((imgw1 + marginx) * 3, elWidth)
const topy1 = getPer(imgh1 + marginy, elHeight) // 第二行顶部
const topy2 = getPer(imgh1 + imgh2 + marginy * 2, elHeight) // 第三行顶部
const topy3 = getPer(marginx, elHeight) //全景片的顶部
const topy31 = getPer(marginx + marginy + imgh3, elHeight) //X片顶部

// 用于临床医生
export const relative2LeftTop = [
  { left: topy0, top: topy0, width: w1, height: hBody }, // 0侧面
  { left: leftx1, top: topy0, width: w1, height: hBody }, // 1正面
  { left: leftx2, top: topy0, width: w1, height: hBody }, // 2正面微笑
  { left: topy0, top: topy1, width: w1, height: hTeeth }, // 3上颌
  { left: leftx2, top: topy1, width: w1, height: hTeeth }, // 4下颌
  { left: leftx2, top: topy2, width: w1, height: hTeeth }, // 5左口内
  { left: leftx1, top: topy2, width: w1, height: hTeeth }, // 6正口内
  { left: topy0, top: topy2, width: w1, height: hTeeth }, // 7右口内
  { left: leftx3, top: topy31, width: w2, height: hSideX }, // 9 侧位片
  { left: leftx3, top: topy3, width: w2, height: hPanoramic }, // 8 全景片
  { left: leftx1, top: topy1, width: w1, height: hTeeth }, // 10
]

import svgSide from './images/side.svg'
import svgFront from './images/front.svg'
import svgFrontSmile from './images/frontsmile.svg'
import svgUpper from './images/upper.svg'
import svgLower from './images/lower.svg'
import svgLeft from './images/left.svg'
import svgMiddle from './images/middle.svg'
import svgRight from './images/right.svg'
import svgSideX from './images/sidex.svg'
import svgPanoramic from './images/panoramic.svg'

// 默认图像的背景
export const RecipeResource = [
  {
    type: 'image',
    name: '侧面像',
    clstype: 'Extraoral',
    label: '侧面像',
    url: svgSide,
    pos: { left: topy0, top: topy0, width: w1, height: hBody },
  }, // 0
  {
    type: 'image',
    name: '正位像',
    clstype: 'Extraoral',
    label: '正位像',
    url: svgFront,
    pos: { left: leftx1, top: topy0, width: w1, height: hBody },
  },
  {
    type: 'image',
    name: '正面微笑',
    clstype: 'Extraoral',
    label: '正面微笑',
    url: svgFrontSmile,
    pos: { left: leftx2, top: topy0, width: w1, height: hBody },
  }, // 2
  {
    type: 'image',
    name: '上牙弓像',
    clstype: 'Intraoral',
    label: '上牙弓',
    url: svgUpper,
    pos: { left: topy0, top: topy1, width: w1, height: hTeeth },
  },
  {
    type: 'image',
    name: '下牙弓像',
    clstype: 'Intraoral',
    label: '下牙弓',
    url: svgLower,
    pos: { left: leftx2, top: topy1, width: w1, height: hTeeth },
  }, // 4
  {
    type: 'image',
    name: '左咬合像',
    clstype: 'Intraoral',
    label: '左咬合',
    url: svgLeft,
    pos: { left: leftx2, top: topy2, width: w1, height: hTeeth },
  },
  {
    type: 'image',
    name: '中正咬合像',
    clstype: 'Intraoral',
    label: '中正咬合',
    url: svgMiddle,
    pos: { left: leftx1, top: topy2, width: w1, height: hTeeth },
  }, // 6
  {
    type: 'image',
    name: '右咬合像',
    clstype: 'Intraoral',
    label: '右咬合',
    url: svgRight,
    pos: { left: topy0, top: topy2, width: w1, height: hTeeth },
  },
  {
    type: 'image',
    name: '侧面X光片',
    clstype: 'Xray',
    label: '侧面X光片',
    url: svgSideX,
    pos: { left: leftx3, top: topy3, width: w2, height: hPanoramic },
  },
  {
    type: 'image',
    name: '全景',
    clstype: 'Xray',
    label: '全景X片',
    url: svgPanoramic,
    pos: { left: leftx3, top: topy31, width: w2, height: hSideX },
  },
  {
    type: 'empty',
    name: 'text',
    label: '点击图像区域，选中文件进行替换',
    pos: { left: leftx1, top: topy1, width: w1, height: hTeeth },
    url: '',
  }, // 10中间，文字描述区域
  {
    type: 'image',
    name: 'pool',
    label: '其他',
    url: ''
  }, // 11其他
  {
    type: 'model',
    name: 'UpperJaw',
    label: '上颌',
    url: svgUpper,
  }, // 12
  {
    type: 'model',
    name: 'LowerJaw',
    label: '下颌',
    url: svgLower,
  },
  {
    type: 'model',
    name: 'Occlusion',
    label: '咬合',
    url: svgMiddle,
  },
]

export function imageHelp() {
  const recipeImages = () => {
    return ''
  }
  return {
    recipeImages,
  }
}

/**
 * 后台判断其他类型图像
 * @param {*} e 
 */
export function isPoolType(e) {
  return e.category == 'pool' && e.fileType == 'None';
}

// 判断初期处方表中的图像是否是全的
export function isFullInitialImage(photoList) {
  const srcNameList = RecipeResource.filter(e=>e.type==='image' && e.name !== 'pool').map(e=>e.name);
  let count = 0;
  if (Array.isArray(photoList)) {
    srcNameList.forEach(name => {
      if (photoList.filter(e=>e.type===name).length > 0) count++;
    })
  }
  return count == srcNameList.length;
}